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M uch has changed since the first edition of JavaScript Step by Step was written in 
2007: the underlying JavaScript specification received a major update; Microsoft 
released new versions of Internet Explorer and Windows; the Chrome browser came of 
age, as did mobile web usage; and JavaScript development frameworks have matured 
and are now ubiquitous. 

This third edition of JavaScript Step by Step builds on the foundation laid down by 
the first two editions. While the underlying architecture of the JavaScript language has 
remained largely the same, use of JavaScript has become pervasive, with huge year- 
over-year increases and an expanded importance to developers. With that in mind, 
the layout and coverage of the book have also remained largely the same, with some 
notable exceptions. The book now places extra emphasis on JavaScript event handling 
and the use of jQuery to speed development. The book also includes a final section on 
Windows 8 development using JavaScript. However, this book is most definitely not 
Microsoft-centric. 

One of the first things I asked prior to accepting the offer to write JavaScript Step 
by Step was whether it had to focus on Microsoft products. The answer was a firm "no." 
The book was and is intended to be a general tutorial on using JavaScript, including 
best practices for using JavaScript on the web. 

The biggest influence Microsoft has had on this book was to make sure that I 
used the term "Internet Explorer" when referring to IE. You'll see this absence of bias 
reflected throughout the book, which includes exercises built using plain text editors 
as well as full-featured development tools. While it's true that most of the screen shots 
show Internet Explorer (I almost said IE), the code was also tested across several other 
browsers, including Chrome and Firefox. In fact, much of the book's code was written in 
Vim, and tested in a cross-browser fashion. 

Throughout the book, you'll find highlights and additions for the new features in 
the latest version of JavaScript. Also, the examples used in the book received greater 
scrutiny in multiple browsers to reflect the reality of today's web landscape. Reader 
feedback from the earlier editions is reflected in the content of this edition and was the 
impetus for adding jQuery and emphasizing event handling. 

Housekeeping aside, this book provides an introductory look at JavaScript, includ- 
ing some of its core functions as well as features and paradigms such as Asynchronous 
JavaScript and XML (AJAX). 



The first part of the book examines JavaScript and helps you get started developing 
JavaScript applications. You don't need any specific tools for JavaScript development, so 
you'll see how to create JavaScript files in Microsoft Visual Studio, and in Appendix B, in 
Eclipse and in Notepad (or any other text editor). The book examines JavaScript func- 
tions and the use of JavaScript in the browser, along with the aforementioned jQuery. 
Finally, the book provides coverage of Windows 8 app development using HTML, CSS, 
and JavaScript. 



Who should read this book 

This book is for beginning JavaScript programmers or people who are interested in 
learning the basics of modern JavaScript programming: the language syntax, how it 
works in browsers, what the common cross-browser problems are, and how to take 
advantage of AJAX and third-party libraries such as jQuery to add interactivity to your 
webpages. 



Assumptions 

This book expects that you have at least a minimal understanding of concepts sur- 
rounding web development. You should be at least somewhat familiar with HTML. CSS 
is also helpful to know, but neither HTML nor CSS are required prerequisite knowledge 
for completing this book. The examples shown provide all the HTML and CSS whenever 
necessary. 



Who should not read this book 

This book isn't meant for experienced JavaScript programmers. 



Organization of this book 

This book is divided into four sections, each of which focuses on a different aspect of 
JavaScript programming. Part I, "Javawhat? The where, why, and how of JavaScript," 
provides the foundation upon which JavaScript is programmed. Included in this part 
are chapters to get you up to speed creating JavaScript programs as well as chapters 
discussing the syntax of JavaScript. Part II, "Integrating JavaScript into design," looks 
closely at the interactions between JavaScript and its primary role of web programming. 
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Part III, "AJAX and server-side integration," shows the use of JavaScript to retrieve and 
parse information from web services. Finally, Part IV, "JavaScript and Windows 8," shows 
how to create a Windows 8 app with HTML, CSS, and JavaScript. 



Conventions and features in this book 

This book takes you step by step through the process of learning the JavaScript pro- 
gramming language. Starting at the beginning of the book and following each of the 
examples and exercises will provide the maximum benefit to help you gain knowledge 
about the JavaScript programming language. 

If you already have some familiarity with JavaScript, you might be tempted to skip 
the first chapter of this book. However, Chapter 1, "JavaScript is more than you might 
think," details some of the background history of JavaScript as well as some of the 
underlying premise for this book, both of which might be helpful in framing the discus- 
sion for the remainder of the book. Chapter 2, "Developing in JavaScript," shows you 
how to get started with programming in JavaScript. If you're already familiar with web 
development, you might already have a web development program, and therefore you 
might be tempted to skip Chapter 2 as well. Nevertheless, you should become familiar 
with the pattern used in Chapter 2 to create JavaScript programs. 

The book contains a Table of Contents that will help you to locate a specific section 
quickly. Each chapter contains a detailed list of the material that it covers. 

The coverage of Windows 8 app development is limited to the final section of the 
book, so if you're not interested in making a Windows 8 app (it's really easy) then you 
can safely skip that last section without missing any of the valuable information neces- 
sary to program in JavaScript for the web. If you're looking for a more comprehensive 
book on Windows 8 development with HTML5 and JavaScript, a beginner's book, Start 
Here! Build Windows 8 Apps with HTML5 and JavaScript will be available from Microsoft 
Press in May (pre-order here: http://oreil.ly/build-w8-apps-HTML5-JS). 

In addition, you can download the source code for many of the examples shown 
throughout the book. 



System requirements 

You will need the following hardware and software to complete the practice exercises in 
this book: 
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■ An operating system capable of running a web server. For the section on 
Windows 8 development, you'll need Windows 8, but none of the other 
examples require Windows. 

■ A text editor such as Notepad, Vim, or an Integrated Development Environment 
(IDE) such as Visual Studio or Eclipse. For Windows 8 development, you'll specifi- 
cally need Visual Studio 2012 for Windows. 

■ An Internet connection so you can download software and chapter examples. 



Code Samples 

Most of the chapters in this book include exercises that let you interactively try out new 
material learned in the main text. The code for those exercises and many other exam- 
ples can be downloaded from: 

h ttp://aka. ms/Ja va Scrip tSbS/files 

Follow the instructions to download the 9780735665934_files file. 



Installing the Code Samples 

Follow these steps to install the code samples on your computer so that you can use 
them with the exercises in this book. 

1. Unzip the 9780735665934_files.zip file that you downloaded from the book's 
website to a location that is accessible by your web server. 

2 . If prompted, review the displayed end user license agreement. If you accept the 
terms, select the accept option, and then click Next. 



Note If the license agreement doesn't appear, you can access it from the 
same webpage from which you downloaded the 9780735665934_files.zip file. 



Using the Code Samples 

Unzipping the sample code creates several subfolders, one for each chapter of the 
book. These subfolders may contain additional subfolders, based on the layout neces- 
sary for a given chapter. 
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The first section of the book, by far the largest, includes just about 
everything you need to know about basic JavaScript syntax. You'll 
start things off by learning some of the background and history of 
JavaScript. It may sound boring, but Chapter 1 will help to frame 
the discussion and tone of the remainder of the book. 



1 



Chapter 2 gets you started with JavaScript development 
by showing how to create a page with JavaScript using Visual 
Studio. See Appendix B for information about using Eclipse or a 
text editor such as Notepad. 

The discussion of JavaScript syntax begins in Chapter 3 and 
continues for the remainder of the first part of the book. You'll 
learn about conditionals, operators, functions, loops, and even 
get an introduction to jQuery. 



CHAPTER 1 



JavaScript is more than you 
might think 



After completing this chapter, you will be able to 

■ Understand the history of JavaScript. 

■ Recognize the parts of a JavaScript program. 

■ Use the javascript pseudo- protocol. 

■ Understand where JavaScript fits within a webpage. 

■ Understand what JavaScript can and cannot do. 

■ Understand how JavaScript is used in Windows 8. 



A brief history of JavaScript 

JavaScript isn't Java. There! With that clarification out of the way, you can move on to bigger, more 
important learning, like how to make cool sliders. In all seriousness, JavaScript is one implementation 
of a specification known as ECMAScript. You'll learn more about ECMAScript later in this chapter. 

Where did JavaScript come from? You might not know the rich and storied history of JavaScript — 
and you might not really care much about it, either. If that's the case, you might be tempted to jump 
ahead to the next chapter and begin coding JavaScript. Doing so, of course, would be a mistake — 
you'd miss all the wonderful information that follows in this chapter. And understanding a bit about 
the history of JavaScript is important to understanding how the language is implemented in various 
environments today. 

JavaScript was originally developed by Brendan Eich at Netscape sometime in 1995-1996. Back 
then, the language was called LiveScript. That was a great name for a new language — and the story 
could have ended there. However, in an unfortunate decision, the folks in marketing had their way, 
and the language was renamed to JavaScript. Confusion soon ensued. You see, Java was the exciting 
new language at the time, and someone decided to try to capitalize on Java's popularity by using 
its name. As a result, JavaScript found itself associated with the Java language. This was a disadvan- 
tage for JavaScript, because Java, although popular in the sense that it was frequently used, was also 
unpopular because it had earned a fairly bad reputation — developers used Java in websites to present 



data or to add useless enhancements (such as annoying scrolling text). The user experience suffered 
because Java required a plug-in to load into the web browser, slowing down the browsing process 
and causing grief for visitors and accessibility problems. Only in recent years has JavaScript begun to 
separate from this negative Java association, but, almost weekly, I still hear people confuse Java and 
JavaScript. You'll hopefully no longer do that! 

JavaScript is not a compiled language, which makes it look and feel like a language that lacks 
power. But programmers new to JavaScript soon came to realize its strengths and usefulness for both 
simulating and creating interactivity on the World Wide Web. Up until that realization, program- 
mers developed many websites using only simple Hypertext Markup Language (HTML) and graphics 
that often lacked both visual appeal and the ability to interact with the site's content. With Microsoft 
Windows 8, JavaScript now has an avenue for creating full-fledged applications that don't rely on the 
web browser. 

Early JavaScript concentrated on client-side form validation and working with images on webpages 
to provide rudimentary, although helpful, interactivity and feedback to the visitor. When a visitor 
to a website filled in a form, JavaScript instantly validated the contents of the web form rather than 
making a round-trip to the server. Especially in the days before broadband was pervasive, prevent- 
ing the round-trip to the server was a great way to help applications seem a little quicker and more 
responsive — and it still is. 



Enter Internet Explorer 3.0 

With the release of Microsoft Internet Explorer 3.0 in 1996, Microsoft included support for core 
JavaScript, known in Internet Explorer as JScript, and support for another scripting language called 
Microsoft Visual Basic, Scripting Edition, or VBScript. Although JavaScript and JScript were similar, 
their implementations weren't exactly the same. Therefore, methods were developed to detect which 
browser the website visitor was using and respond with appropriate scripting. This process is known 
as browser detection, and is discussed in Chapter 11, "An introduction to jQuery." Although it is con- 
sidered undesirable for most applications, you'll still see browser detection used, especially with the 
advent of mobile devices that have their own special look and feel. 



And then came ECMAScript 

In mid-1997, Microsoft and Netscape worked with the European Computer Manufacturers Association 
(ECMA) to release the first version of a language specification known as ECMAScript, more formally 
known as ECMA-262. Since that time, all browsers from Microsoft have implemented versions of the 
ECMAScript standard. Other popular browsers, such as Firefox, Safari, and Opera, have also imple- 
mented the ECMAScript standard. 

ECMA-262 edition 3 was released in 1999. The good news is that browsers such as Microsoft 
Internet Explorer 5.5 and Netscape 6 supported the edition 3 standard, and every major browser 
since then has supported the version of JavaScript formalized in the ECMA-262 edition 3 standard. 

The bad news is that each browser applies this standard in a slightly different way, so incompatibilities 
still plague developers who use JavaScript. 
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The latest version of ECMAScript, as formalized in the standard known as ECMA-262, was released 
in late 2009 and is known as ECMA-262 edition 5. Version 4 of the specification was skipped for a 
variety of reasons and to avoid confusion among competing proposals for the standard. ECMA-262 
edition 5.1 is becoming more widely supported as of this writing and will likely (I'm hopeful) be in 
versions of popular browsers such as Internet Explorer, Chrome, Firefox, Opera, and Safari by the time 
you read this book. 

It's important to note that as a developer who is incorporating JavaScript into web applications, 
you need to account for the differences among the versions of ECMA-262, and among the many 
implementations of JavaScript. Accounting for these differences might mean implementing a script 
in slightly different ways, and testing, testing, and testing again in various browsers and on various 
platforms. On today's Internet, users have little tolerance for poorly designed applications that work 
in only one browser. 

Accounting for those differences has become much easier in the last few years, and there are two 
primary reasons. First, web browsers have consolidated around the specifications for HTML, CSS, and 
JavaScript, and the vendors have worked to bring their interpretation of the specifications closer to 
one another. The second reason that accounting for differences has become easier is that JavaScript 
libraries have become more popular. Throughout the book, I'll show the use of the jQuery library to 
make JavaScript easier. 



Important It is imperative that you test your websites in multiple browsers — including web 
applications that you don't think will be used in a browser other than Internet Explorer. 

Even if you're sure that your application will be used only in Internet Explorer or if that's 
all you officially support, you still should test in other browsers. This is important both for 
security and because it shows that you're a thorough developer who understands today's 
Internet technologies. 



So many standards... 

If you think the standards of JavaScript programming are loosely defined, you're right. Each browser 
supports JavaScript slightly differently, making your job — and my job — that much more difficult. 
Trying to write about all these nuances is more challenging than writing about a language that is 
implemented by a single, specific entity, like a certain version of Microsoft Visual Basic or Perl. Your 
job (and mine) is to keep track of these differences and account for them as necessary, and to try to 
find common ground among them as much as possible. 



The DOM 

Another evolving standard relevant to the JavaScript programmer is the Document Object Model 
(DOM) standard developed by the World Wide Web Consortium (W3C). The W3C defines the DOM 
as "a platform- and language-neutral interface that allows programs and scripts to dynamically access 
and update the content, structure, and style of documents." What this means for you is that you can 
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work with a specification to which web browsers adhere to develop a webpage in a dynamic man- 
ner. The DOM creates a tree structure of objects for HTML and Extensible Markup Language (XML) 
documents and enables scripting of those objects. JavaScript interacts heavily with the DOM for many 
important functions. 

Like JavaScript, the DOM is interpreted differently by every browser, making life for a JavaScript 
programmer more interesting. Internet Explorer 4.0 and earlier versions of Netscape included support 
for an early DOM, known as Level 0. If you use the Level 0 DOM, you can be pretty sure that you'll 
find support for the DOM in those browsers and in all the browsers that came after. 

Microsoft Internet Explorer 5.0 and Internet Explorer 5.5 included some support for the Level 1 
DOM, whereas Windows Internet Explorer 6.0 and later versions include some support for the Level 

2 DOM. The latest versions of Internet Explorer, Chrome, Firefox, Safari, and Opera support the Level 

3 DOM in some form. Safari provides a representation of the WebKit rendering engine. The WebKit 
rendering engine is also used as the basis for the browser on devices such as the iPhone and iPad and 
on Android-based devices. 



If there's one lesson that you should take away while learning about JavaScript standards and the 
related DOM standards, it's that you need to pay particular attention to the code that you write (no 
surprise there) and the syntax used to implement that code. If you don't, JavaScript can fail miser- 
ably and prevent your page from rendering in a given browser. Chapter 12, "The Document Object 
Model," covers the DOM in much greater detail. 




Tip The W3C has an application that can test the modules specified by the various DOM 
levels that your web browser claims to support. This application can be found at http:// 
www.w3.org/2003/02/06-dom-supporthtml. 



What's in a JavaScript program? 

A JavaScript program consists of statements and expressions formed from tokens of various catego- 
ries, including keywords, literals, separators, operators , and identifiers placed together in an order that 
is meaningful to a JavaScript interpreter, which is contained in most web browsers. That sentence is a 
mouthful, but these statements are really not all that complicated to anyone who has programmed in 
just about any other language. An expression might be: 

var smallNumber = 4; 

In that expression, a token, or reserved word — var — is followed by other tokens, such as an identi- 
fier (smallNumber), an operator (=), and a literal (4). (You learn more about these elements through- 
out the rest of the book.) The purpose of this expression is to set the variable named smallNumber 
equal to the integer 4. 

Like in any programming language, statements get put together in an order that makes a program 
perform one or more functions. JavaScript defines functions in its own way, which you read much 
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more about in Chapter 7, "Working with functions." JavaScript defines several built-in functions that 
you can use in your programs. 

Using the javascript pseudo-protocol and a function 

1. Open a web browser. 

2. In the address bar, type the following code and press Enter: 
javascript: alert ("Hello World") ; 

After you press Enter, you see a dialog box similar to this one: 




Congratulations! You just programmed your first (albeit not very useful) bit of JavaScript code. 
However, in just this little bit of code, are two important items that you are likely to use in your 
JavaScript programming endeavors: the javascript pseudo-protocol identifier in a browser and, more 
importantly, the alert function. You'll examine these items in more detail in later chapters; for now, it 
suffices that you learned something that you'll use in the future! 



Note Internet Explorer 10 in Windows 8 sometimes doesn't display or use the javascript 
pseudo-protocol correctly. 



JavaScript is also event-driven , meaning that it can respond to certain events or "things that hap- 
pen," such as a mouse click or text change within a form field. Connecting JavaScript to an event is 
central to many common uses of JavaScript. In Chapter 11, you see how to respond to events by using 
JavaScript. 



JavaScript placement on your webpage 

If you're new to HTML, all you need to know about it for now is that it delineates elements in a web- 
page using a pair of matching tags enclosed in brackets. The closing tag begins with a slash char- 
acter (/). Elements can be nested within one another. JavaScript fits within <SCRIPT> tags inside the 
<HEAD> </HEAD> and/or <BODY> </BODY> tags of a webpage, as in the following example: 



<!doctype html> 
<html > 

<head> 
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<title>A Web Page Ti tl e</ti tl e> 

<scri pt type="text/javascri pt"> 

// JavaScript Goes Here 
</scri pt> 

</head> 

<body> 

<scri pt type="text/javascri pt"> 

// JavaScript can go here too 
</scri pt> 

</body> 

</html > 

JavaScript placed within the <BODY> tags executes as it is encountered by the browser, which is 
helpful when you need to write to the document by using a JavaScript function, as follows (the func- 
tion calls are shown in boldface type): 

<!doctype html> 

<html > 

<head> 

<title>A Web Page Ti tl e</ti tl e> 

<scri pt type="text/javascri pt"> 

// JavaScript Goes Here 
</scri pt> 

</head> 

<body> 

<scri pt type="text/javascri pt"> 

document .write("hello") ; 
document . wri te(" worl d") ; 

</scri pt> 

</body> 

</html> 



Because of the way browsers load JavaScript, the current best practice for placing JavaScript in 
your HTML is to position the <SCRIPT> tags at the end of the <BODY> element rather than in the 
<HEAD> element. Doing so helps to ensure that the content of the page is rendered if the browser 
blocks input while the JavaScript files are being loaded. 

When you're using JavaScript on an Extensible Hypertext Markup Language (XHTML) page, the 
less-than sign (<) and the ampersand character (&) are interpreted as XML, which can cause problems 
for JavaScript. To get around this, use the following syntax in an XHTML page: 



<scri pt type="text/javascri pt"> 

< ! [CDATA[ 

// JavaScript Goes Here 

]]> 

</scri pt> 

Browsers that aren't XHTML-compliant don't interpret the CDATA section correctly. You can work 
around that problem by placing the CDATA section inside a JavaScript comment — a line or set of lines 
prefaced by two forward slashes {//), as shown here: 



<scri pt type="text/javascri pt"> 
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//<! [CDATA[ 

// JavaScript Goes Here 
//]]> 

</scri pt> 

Yes, the code really is that ugly. However, there's an easy fix for this: use external JavaScript files. In 
Chapter 2, "Developing in JavaScript," you learn exactly how to accomplish this simple task. 



Document types 

If you've been programming for the web for any length of time, you're probably familiar with 
Document Type declarations, or DOCTYPE declarations, as they're sometimes called. One of 
the most important tasks you can do when designing your webpages is to include an accurate 
and syntactically correct DOCTYPE declaration section at the top of the page. The DOCTYPE 
declaration, frequently abbreviated as DTD, lets the browser (or other parsing program) know 
the rules that will be followed when parsing the elements of the document. 

An example of a DOCTYPE declaration for HTML 4.01 looks like this: 

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3 .org/TR/html 4/s tri ct . dtd"> 

If you're using a Microsoft Visual Studio version earlier than version 2012 to create a web 
project, each page is automatically given a DOCTYPE declaration for the XHTML 1.0 standard, 
like this: 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ti onal //EN" "http://www.w3.org/TR 
/xhtml 1/DTD/xhtml 1-t ransi ti onal . dtd"> 

HTML version 5 uses a much simpler DOCTYPE: 

<! DOCTYPE html> 

If you fail to declare a DOCTYPE, the browser interprets the page by using a mode known 
as Quirks Mode. Falling back to Quirks Mode means that the document might end up looking 
different from your intention, especially when viewed through several browsers. 

If you do declare a DOCTYPE, making sure that the resulting HTML, cascading style sheet 
(also known as CSS), and JavaScript also adhere to web standards is important so that the 
document can be viewed as intended by the widest possible audience, no matter which inter- 
face or browser is used. The W3C makes available an online validator at http://validator.w3.org/ 
which you can use to validate any publicly available webpage. 



Tip Use the Markup Validator regularly until you're comfortable with coding to standards, 
and always check for validity before releasing your web project to the public. 
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What JavaScript can do 



JavaScript is largely a complementary language, meaning that it's uncommon for an entire applica- 
tion to be written solely in JavaScript without the aid of other languages like HTML and without 
presentation in a web browser. Some Adobe products support JavaScript, and Windows 8 begins to 
change this, but JavaScript's main use is in a browser. 

JavaScript is also the J in the acronym AJAX (Asynchronous JavaScript and XML), the darling of 
the Web 2.0 phenomenon. However, beyond that, JavaScript is an everyday language providing the 
interactivity expected, maybe even demanded, by today's web visitors. 

JavaScript can perform many tasks on the client side of the application. For example, it can add 
the needed interactivity to a website by creating drop-down menus, transforming the text on a page, 
adding dynamic elements to a page, and helping with form entry. 

Before learning about what JavaScript can do — the focus of this book — you need to understand 
what JavaScript can't do, but note that neither discussion is comprehensive. 



What JavaScript can't do 

Many of the operations JavaScript can't perform are the result of JavaScript's usage being somewhat 
limited to a web browser environment. This section examines some of the tasks JavaScript can't per- 
form and some that JavaScript shouldn't perform. 



JavaScript can't be forced on a client 

JavaScript relies on another interface or host program for its functionality. This host program is usu- 
ally the client's web browser, also known as a user agent. Because JavaScript is a client-side language, 
it can do only what the client allows it to do. 

Some people are still using older browsers that don't support JavaScript at all. Others won't be 
able to take advantage of many of JavaScript's fancy features because of accessibility programs, text 
readers, and other add-on software that assists the browsing experience. And some people might 
just choose to disable JavaScript because they can, because of security concerns (whether perceived 
or real), or because of the poor reputation JavaScript received as a result of certain annoyances like 
pop-up ads. 

Regardless of the reason, you need to perform some extra work to ensure that the website you're 
designing is available to those individuals who don't have JavaScript. I can hear your protests already: 
"But this feature is really [insert your own superlative here: cool, sweet, essential, nice, fantastic]." 
Regardless of how nice your feature might be, the chances are you will benefit from better interoper- 
ability and more site visitors. In the "Tips for using JavaScript" section later in this chapter, I offer some 
pointers that you can follow for using JavaScript appropriately on your website. 
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It might be helpful to think of this issue another way. When you build a web application that gets 
served from Microsoft Internet Information Services (IIS) 6.0, you can assume that the application will 
usually work when served from an IIS 6.0 server anywhere. Likewise, when you build an application for 
Apache 2, you can be pretty sure that it will work on other Apache 2 installations. However, the same 
assumption cannot be made for JavaScript. When you write an application that works fine on your 
desktop, you can't guarantee that it will work on somebody else's. You can't control how your applica- 
tion will work after it gets sent to the client. 



JavaScript can't guarantee data security 

Because JavaScript is run wholly on the client, the developer must learn to let go. As you might 
expect, letting go of control over your program has serious implications. After the program is on the 
client's computer, the client can do many undesirable things to the data before sending it back to the 
server. As with any other web programming, you should never trust any data coming back from the 
client. Even if you've used JavaScript functions to validate the contents of forms, you still must validate 
this input again when it gets to the server. A client with JavaScript disabled might send back garbage 
data through a web form. If you believe, innocently enough, that your client-side JavaScript function 
has already checked the data to ensure that it is valid, you might find that invalid data gets back to 
the server, causing unforeseen and possibly dangerous consequences. 



Important Remember that JavaScript can be disabled on your visitor's computer. You can- 
not rely on cute tricks to be successful, such as using JavaScript to disable right-clicks or 
to prevent visitors from viewing the page source, and you shouldn't use them as security 
measures. 



JavaScript can't cross domains 

The JavaScript developer also must be aware of the Same-Origin Policy, which dictates that scripts 
running from within one domain neither have access to the resources from another Internet domain, 
nor can they affect the scripts and data from another domain. For example, JavaScript can be used to 
open a new browser window, but the contents of that window are somewhat restricted to the calling 
script. When a page from my website ( braingia.org ) contains JavaScript, that page can't access any 
JavaScript executed from a different domain, such as microsoft.com. This is the essence of the Same- 
Origin Policy: JavaScript has to be executed in or originate from the same location. 

The Same-Origin Policy is frequently a restriction to contend with in the context of frames and 
AJAX's XMLHttpRequest object, where multiple JavaScript requests might be sent to different web 
servers. With the introduction of Windows Internet Explorer 8, Microsoft introduced support for the 
XDomainRequest object, which allows limited access to data from other domains. 
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JavaScript doesn't do servers 

When developing server-side code such as Visual Basic .NET or PHP (a recursive acronym that stands 
for PHP: Hypertext Preprocessor), you can be fairly sure that the server will implement certain func- 
tions, such as talking to a database or giving access to modules necessary for the web application. 
JavaScript doesn't have access to server-side variables. For example, JavaScript cannot access data- 
bases that are located on the server. JavaScript code is limited to what can be done inside the plat- 
form on which the script is running, which is typically the browser. 

Another shift you need to make in your thinking, if you're familiar with server-side programming, 
is that with JavaScript, you have to test the code on many different clients to know what a particular 
client is capable of. When you're programming server-side, if the server doesn't implement a given 
function, you know it right away because the server-side script fails when you test it. Naughty admin- 
istrators aside, the back-end server code implementation shouldn't change on a whim, and thus, 
you more easily know what you can and cannot code. But you can't anticipate JavaScript code that is 
intended to run on clients, because these clients are completely out of your control. 



Note There are server-side implementations of JavaScript, but they are beyond the scope 
of this book. 



Tips for using JavaScript 

Several factors go into good web design, and really, who arbitrates what is and is not considered 
good anyway? One visitor to a site might call the site an ugly hodgepodge of colors and text created 
as if those elements were put in a sack and shaken until they fell out onto the page; the next visitor 
might love the design and color scheme. 

Because you're reading this book, I assume that you're looking for some help with using JavaScript 
to enhance your website. I also assume that you want to use this programming language to help 
people use your site and to make your site look, feel, and work better. 

The design of a website is not and will never be an entirely objective process. The goal of one web- 
site might be informational, which would dictate one design approach, whereas the goal of another 
website might be to connect to an application, thus requiring specialized design and functionality. 
That said, many popular and seemingly well-designed sites have certain aspects in common. I try to 
break down those aspects here, although I ask you to remember that I didn't create a comprehensive 
list and that the items reflect only one person's opinions. 

A well-designed website does the following: 

■ Emphasizes function over form When a user visits a website, she usually wants to obtain 
information or perform a task. The more difficult your site is to browse, the more likely the 
user is to move to another site with better browsing. 
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Animations and blinking bits come and go, but what remain are sites that have basic informa- 
tion presented in a professional, easily accessible manner. Using the latest cool animation soft- 
ware or web technology makes me think of the days of the HTML <BLINK> tag. The <BLINK> 
tag, for those who never saw it in action, caused the text within it to disappear and reappear 
on the screen. Nearly all web developers seem to hate the <BLINK> tag and what it does to a 
webpage. Those same developers would be wise to keep in mind that today's exciting feature 
or special effect on a webpage will be tomorrow's <BUNK> tag. Successful websites stick to 
the basics and use these types of bits only when the content requires them. 

Use elements like a site map, alt tags, and simple navigation tools, and don't require special 
software or plug-ins for viewing the site's main content. Too often, I visit a website only to 
be stopped because I need a plug-in or the latest version of this or that player (which I don't 
have) to browse it. 

Although site maps, alt tags, and simple navigation might seem quaint, they are indispensable 
items for accessibility. Text readers and other such technologies that enable sites to be read 
aloud or browsed by individuals with disabilities use these assistive features and frequently 
have problems with complex JavaScript. 

Follows standards Web standards exist to be followed, so ignore them at your own peril. 
Using a correct DOCTYPE declaration and well-formed HTML helps ensure that your site will 
display correctly to your visitors. Validation using the W3C's Markup Validator tool is highly 
recommended. If your site is broken, fix it! 

Renders correctly in multiple browsers Even when Internet Explorer had 90 percent 
market share, it was never a good idea for programmers to ignore other browsers. Doing so 
usually meant that accessibility was also ignored, so people with text readers or other add-ons 
couldn't use the site. People using operating systems other than Microsoft Windows might 
also be out of luck visiting those sites. 

Although Internet Explorer is still the leader among browsers used by web visitors, it isn't the 
only browser your web visitors will use. Somewhere around 3 or 4 of every 10 visitors will be 
using a different web browser. 

You never want to turn away visitors because of their browser choice. Imagine the shopkeeper 
who turned away 3 of every 10 potential customers just because of their shoes. That shop 
wouldn't be in business too long — or at the very least, it wouldn't be as successful. 

If you strive to follow web standards, chances are that you're already doing most of what you 
need to do to support multiple browsers. Avoiding the use of proprietary plug-ins for your 
website is another way to ensure that your site renders correctly. You need to look only as 
far as the iPad to see a device that is popular but whose use is restricted because it doesn't 
natively support Flash. For this reason, creating sites that follow standards and avoid propri- 
etary plug-ins ensures that your site is viewable by the widest possible audience. 

Uses appropriate technologies at appropriate times Speaking of plug-ins, a well- 
designed website doesn't overuse or misuse technology. On a video site, playing videos is 
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appropriate. Likewise, on a music site, playing background music is appropriate. On other 
sites, these features might not be so appropriate. If you feel that your site needs to play back- 
ground music, go back to the drawing board and examine why you want a website in the first 
place! I still shudder when I think of an attorney's website that I once visited. The site started 
playing the firm's jingle in the background, without my intervention. Friends don't let friends 
use background music on their sites. 



Where JavaScript fits 

Today's web is still evolving. One of the more popular movements is known as unobtrusive scripting . 
The unobtrusive scripting paradigm contains two components, progressive enhancement and behav- 
ioral separation. Behavioral separation calls for structure to be separated from style, and for both of 
these elements to be separated from behavior. In this model, HTML or XHTML provides the structure, 
whereas the CSS provides the style and JavaScript provides the behavior. Progressive enhancement 
means adding more features to the page as the browser's capabilities are tested; enhancing the user 
experience when possible but not expecting that JavaScript or a certain JavaScript function will always 
be available. In this way, the JavaScript is unobtrusive; it doesn't get in the way of the user experi- 
ence. If JavaScript isn't available in the browser, the website still works because the visitor can use the 
website in some other way. 

When applied properly, unobtrusive scripting means that JavaScript is not assumed to be available 
and that JavaScript will fail in a graceful manner. Graceful degradation helps the page function with- 
out JavaScript or uses proper approaches to make JavaScript available when it's required for the site. 

I'm a proponent of unobtrusive scripting because it means that standards are followed and the 
resulting site adheres to the four recommendations shared in the previous section. Unfortunately, this 
isn't always the case. You could separate the HTML, CSS, and JavaScript and still end up using proprie- 
tary tags, but when you program in an unobtrusive manner, you tend to pay closer attention to detail 
and care much more about the end result being compliant with standards. 

Throughout this book, I strive to show you not only the basics of JavaScript but also the best way 
to use JavaScript effectively and, as much as possible, unobtrusively. 

/ 

A note on JScript and JavaScript and this book 

This book covers JavaScript as defined by the ECMA standard, in versions all the way through 
the latest edition 5. This is distinct from Microsoft's implementation of JScript, which is not 
covered in this book. For an additional reference on only JScript, I recommend the follow- 
ing site: JScript (Windows Script Technologies) at http://msdn.microsoft.com/en-us/Hbrary/ 
hbxc2t98.aspx. 
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Which browsers should the site support? 

Downward compatibility has been an issue for the web developer for a long time. Choosing which 
browser versions to support becomes a trade-off between using the latest functionality available in 
the newest browsers and the compatible functionality required for older browsers. There is no hard 
and fast rule for which browsers you should support on your website, so the answer is: it depends. 

Your decision depends on what you'd like to do with your site and whether you value visits by 
people using older hardware and software more than you value the added functionality available in 
later browser versions. Some browsers are just too old to support because they can't render CSS cor- 
rectly, much less JavaScript. A key to supporting multiple browser versions is to test with them. All of 
this means that you need to develop for and test in an appropriate set of browsers before releasing a 
website for public consumption. 

Obtaining an MSDN account from Microsoft will give you access to both new and older 
verions of products, including Internet Explorer. Additional resources are the Application 
Compatibility Virtual PC Images, available for free from Microsoft. These allow you to 
use a time-limited version of Microsoft Windows containing older versions of Internet 
Explorer, too. For more information, see http://www.microsoft.com/downloods/detoils. 
ospx?Fomilyld=21EABB90-958F-4B64-B5Fl-73D0A413C8EF&disploylong=en. 

Many web designs and JavaScript functions don't require newer versions of web browsers. 
However, as already explained, verifying that your site renders correctly in various browsers is always 
a good idea. See http://browsers.evolt.org/ for links to archives of many historical versions of web 
browsers. Even if you can't conduct extensive testing in multiple browsers, you can design the site so 
that it fails in a graceful manner. You want the site to render appropriately regardless of the browser 
being used. 



And then came Windows 8 



Microsoft Windows 8 represents a paradigm shift for JavaScript programmers. In Windows 8, 
Microsoft has elevated JavaScript to the same level as other client-side languages, such as Visual 
Basic and C#, for developing Windows 8 applications. Before Windows 8, if you wanted to create an 
application that ran on the desktop, you'd need to use Visual Basic, C#, or a similar language. With 
Windows 8, you need only use HTML and JavaScript to create a full-fledged Windows 8-style app. 

Windows 8 exposes an Application Programming Interface (API), providing a set of functions that 
enable the JavaScript programmer to natively access behind-the-scenes areas of the operating sys- 
tem. This means that programming for Windows 8 is slightly different from programming JavaScript 
for a web browser. 
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Of course, your web applications will still work in Internet Explorer, which comes with Windows 8. 
These web applications are distinct and separate from the Windows 8 native applications. 

This book will show how to develop for Windows 8 using JavaScript. Before you get there, you'll 
see how to create JavaScript programs that run in web browsers. 



Exercises 



1. True or False: JavaScript is defined by a standards body and is supported on all web browsers. 

2 . True or False: When a visitor whose machine has JavaScript disabled comes to your website, 
you should block his access to the site because there's no valid reason to have JavaScript 
disabled. 

3 . Create a JavaScript definition block that would typically appear on an HTML page within the 
<HEAD> or <BODY> block. 

4 . True or False: It's important to declare the version of JavaScript being used within the 
DOCTYPE definition block. 

5 . True or False: JavaScript can appear in the <HEAD> block and within the <BODY> text of an 
HTML page. 
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CHAPTER 4 



Working with variables and 
data types 



After completing this chapter, you will be able to 

■ Understand the primitive data types used in JavaScript. 

■ Use functions associated with the data types. 

■ Create variables. 

■ Define objects and arrays. 

■ Understand the scope of variables. 

■ Debug JavaScript using Firebug. 



Data types in JavaScript 

The data types of a language describe the basic elements that can be used within that language. 
You're probably already familiar with data types, such as strings or integers, from other languages. 
Depending on who you ask, JavaScript defines anywhere from three to six data types. (The answer 
depends largely on the definition of a data type.) You work with all these data types regularly, some 
more than others. 

The six data types in JavaScript discussed in this chapter are as follows: 

■ Numbers 

■ Strings 

■ Booleans 

■ Null 

■ Undefined 

■ Objects 
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The first three data types — numbers, strings, and Booleans — should be fairly familiar to program- 
mers in any language. The latter three — null, undefined, and objects — require some additional expla- 
nation. I examine each of the data types in turn and explain objects further in Chapter 8, "Objects in 
JavaScript." 

Additionally, JavaScript has several reference data types, including the Array, Date , and RegExp 
types. The Date and RegExp types are discussed in this chapter, and the Array type is discussed in 
Chapter 8. 



Working with numbers 

Numbers in JavaScript are just what you might expect them to be: numbers. However, what might be 
a surprise for programmers who are familiar with data types in other languages like C is that integers 
and floating point numbers do not have special or separate types. All these are perfectly valid num- 
bers in JavaScript: 

4 

51.50 

-14 

Oxd 

The last example, Oxd, is a hexadecimal number. Hexadecimal numbers are valid in JavaScript, and 
you won't be surprised to learn that JavaScript allows math to be performed using all of the listed 
number formats. Try the following exercise. 



Performing hexadecimal math with JavaScript 

1. Using Microsoft Visual Studio, Eclipse, or another editor, edit the file examplel.html in the 
ChapteKM sample files folder in the companion content. 

2 . Within the webpage, replace the TODO comment with the boldface code shown here: 



<!doctype html> 

<html > 

<head> 

<ti tl e>Hexadeci mal Numbers</ti tl e> 

<scri pt type="text/javascri pt"> 

var h = Oxe; 

var i = 0x2; 

var j = h * i ; 

alert(j) ; 

</scri pt> 

</head> 

<body> 

</body> 

</html> 
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3 . View the webpage in a browser. You should see a dialog box similar to this one: 




The preceding script first defines two variables (you learn about defining variables later in this 
chapter) and sets them equal to two hexadecimal numbers, Oxe (14 in base 10 notation) and 0x2, 
respectively: 

var h = Oxe; 
var i = 0x2; 

Then a new variable is created and set to the product of the previous two variables, as follows: 
var j = h * i ; 

The resulting variable is then passed to the alert() function, which displays the dialog box in the 
preceding step 3. It's interesting to note that even though you multiplied two hexadecimal numbers, 
the output in the alert dialog box is in base 10 format. 

Numeric functions 

JavaScript has some built-in functions (and objects, too, which you learn about soon) for working with 
numeric values. The European Computer Manufacturers Association (ECMA) standard defines several 
of them. One more common numeric function is the isNaN() function. By common, I mean that 
isNaN() is a function that I use frequently in JavaScript programming. Your usage might vary, but an 
explanation follows nonetheless. 

NoN is an abbreviation for Not o Number, and it represents an illegal number. You use the isNoN() 
function to determine whether a number is legal or valid according to the ECMA-262 specifica- 
tion. For example, a number divided by zero would be an illegal number in JavaScript. The string 
value "This is not a number" is obviously also not a number. Although people might have a different 
interpretation of what is and isn't a number, the string "four" is not a number to the isNaN() func- 
tion, whereas the string "4" is. The isNaN() function requires some mental yoga at times because 
it attempts to prove a negative — that the value in a variable is not a number. Here are a couple of 
examples that you can try to test whether a number is illegal. 

Testing the isNaN() function (test 1) 

1. In Microsoft Visual Studio, Eclipse, or another editor, create a new HTML file or edit the 
isnan.html file in the companion content. 
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2 . In the file, place the following markup. If you've created a new file with Vision Studio, delete 
any existing contents first. 

<!doctype html> 

<html > 

<head> 

<ti tl e>i sNaN</ti tl e> 

</head> 

<body> 

<scri pt type="text/javascri pt"> 

document .wri te("Is Not a Number: " + isNaN("4")); 

</scri pt> 

</body> 

</html> 

3. View this page in a browser. In Visual Studio, press F5. You'll see a page like this one: 




The function isNaN() returns false from this expression because the integer value 4 is a number. 
Remember that the meaning of this function is, "Is 4 Not a Number?" Well, 4 is a number, so the result 
is false. 

Now consider the next example. 



Testing the isNaN() function (test 2) 

1. If you're running through Microsoft Visual Studio, stop the project. For those not running 
Visual Studio, close the web browser. 

2 . Edit isnan.html. 

3. Change the isNaN() function line to read: 

document .wri te("Is Not a Number: " + i sNaN("four")) ; 
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View the page in a browser, or rerun the project in Visual Studio. You'll now see a page like this: 




In second test case, because the numeral 4 is represented as a string of nonnumeric characters 
(four), the function returns true : the string four is not a number. I purposefully used double quotation 
marks in each code example (that is, "4" and "four") to show that the quotation marks don't matter for 
this function. Because JavaScript is smart enough to realize that "4" is a number, JavaScript does the 
type conversion for you. However, this conversion can sometimes be a disadvantage, such as when 
you're counting on a variable or value to be a certain type. 

The isNoN() function is used frequently when validating input to determine whether something — 
maybe a form variable — was entered as a number or as text. 



Numeric constants 

Other numeric constants are available in JavaScript, some of which are described in Table 4-1. 
These constants might or might not be useful to you in your JavaScript programming, but they 
exist if you need them. 

TABLE 4-1 Selected numeric constants 



Constant 


Description 


Infinity 


Represents positive infinity 


Number. MAX_ VALUE 


The largest number able to be represented in JavaScript 


Number. MIN_ VALUE 


The smallest or most negative number able to be represented in JavaScript 


Number. NEGATIVE_ INFINITY 


A value representing negative infinity 


Number. POSITIVE _ INFINITY 


A value representing positive infinity 



The Math object 

The Math object is a special built-in object used for working with numbers in JavaScript, and it has 
several properties that are helpful to the JavaScript programmer, including properties that return 
the value of pi, the square root of a number, a pseudo-random number, and an absolute value. 
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Some properties are value properties, meaning they return a value, whereas others act like func- 
tions and return values based on the arguments sent into them. Consider this example of the Moth. PI 
value property. Place this code between the opening <SCRIPT TYPE-"text/jovoscript"> and closing 
</SCRIPT> tags in your sample page: 

document . wri te(Math . PI) ; 



The result is shown in Figure 4-1. 





Several other properties of the Math object can be helpful to your program. Some of them act 
as functions or methods on the object, several of which are listed in Table 4-2. You can obtain a 
complete list of properties for the Moth object in the ECMA-262 specification at http://www.ecmo- 
internotional.org/publicotions/files/ECMA-ST/Ecma-262.pdf. 

TABLE 4-2 Select function properties of the Moth object 



Property 


Definition 


Math.randomO 


Returns a pseudo-random number 


Math.abs(x) 


Returns the absolute value of x 


Math.pow(x,y) 


Returns x to the power of y 


Math.round(x) 


Returns x rounded to the nearest integer value 
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Working with strings 

Strings are another basic data type available in JavaScript. They consist of one (technically zero) or 
more characters surrounded by quotation marks. The following examples are strings: 

■ " Hello world " 

■ "B" 

■ " This is 'another string"' 

The last example in the preceding list requires some explanation. Strings are surrounded by either 
single or double quotation marks. Strings enclosed in single quotation marks can contain double 
quotation marks. Likewise, a string enclosed in double quotation marks, like the ones you see in the 
preceding example, can contain single quotation marks. So basically, if the string is surrounded by 
one type of quotation mark, you can use the other type within it. Here are some more examples: 

■ 'The cow says ''moo''.' 

■ 'The talking clock says the time is ''Twelve Noon''.' 

■ '"Everyone had a good time' was the official slogan." 

Escaping quotation marks 

If you use the same style of quotation mark both within the string and to enclose the string, the 
quotation marks must be escaped so that they won't be interpreted by the JavaScript engine. A single 
backslash character (\) escapes the quotation mark, as in these examples: 

■ 7 \'m using single quotation marks both outside and within this example. TheyXre neat.' 

■ "This is a X'greatX' example of using Y'double quotes\" within a string that's enclosed with 
Y'double quotesY' too." 



Other escape characters 

JavaScript enables other characters to be represented with specific escape sequences that can appear 
within a string. Table 4-3 shows those escape sequences. 



TABLE 4-3 Escape sequences in JavaScript 



Escape character 


Sequence value 


\b 


Backspace 


\t 


Tab 


\n 


Newline 


\v 


Vertical tab 


\f 


Form feed 


\r 


Carriage return 


\\ 


Literal backslash 
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Here's an example of some escape sequences in action. 



Using escape sequences 

1. In Visual Studio, Eclipse, or another editor, open your sample page. 

2 . Within the <SCRIPT> section, place the following line of JavaScript: 
document.wri te("hel lo\t\t\"hel 1o\" good bye") ; 

3 . View the page in a browser. You'll see a page like the following. Notice that the tab characters 
don't show through because the browser interprets HTML and not tab characters. 




This rather contrived example shows escape sequences in action. In the code, the word hello is fol- 
lowed by two tabs, represented by their escape sequence of \t, followed by an escaped double-quote 
\" and then the word hello followed by another escaped double-quote \", finally followed by the word 
goodbye. 

String methods and properties 

JavaScript defines several properties and methods for working with strings. These properties and 
methods are accessed using dot notation explained earlier in this chapter and familiar to many 
programmers. 



Note In the same way I describe only some of the elements of JavaScript in this book, I 
cover only a subset of the string properties and methods available in the ECMA-262 specifi- 
cation. Refer to the ECMA specification for more information. 



The length property on a string object gives the length of a string, not including the enclosing 
quotation marks. The length property can be called directly on a string literal, as in this example: 

alert("This is a stri ng . " . 1 ength) ; 
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However, it's much more common to call the length property on a variable, like this: 

var x = "This is a string."; 
alert(x. length) ; 



Both examples give the same result. 

Some commonly used string methods, besides substring, include slice , substr, concat, toUpperCase , 
toLowerCose , and the pattern matching methods of match, search , and replace. I discuss each of these 
briefly. 

Methods that change strings include slice, substring, substr, and concat. The slice and substring 
methods return string values based on another string. They accept two arguments: the beginning 
position and an optional end position. Here are some examples: 

var myString = "This is a string."; 

alert(myString.substring(3)) ; //Returns "s is a string." 
alert(myString.substring(3,9)) ; //Returns "s is a" 
al ert(myStri ng . si i ce(3)) ; //Returns "s is a string." 
alert(myString.slice(3,9)) ; //Returns "s is a" 

A subtle difference between slice and substring is how they handle arguments with negative values. 
The substring method will convert any negative values to 0, while slice will treat negative arguments 
as the starting point from the end of the string (counting backwards from the end, essentially). 

The substr method also accepts two arguments: the first is the beginning position to return, and, in 
contrast to substring/slice, the second argument is the number of characters to return, not the stop- 
ping position. Therefore, the code examples for substring/slice work a little differently with substr : 



var myString = "This is a string."; 

alert(myString.substr(3)) ; //Returns "s is a string." (The same as substring/slice) 
al ert(myStri ng . substr(3 , 9)) ; //Returns "s is a st" (Different from substring/slice) 

The concat method concatenates two strings together: 

var firstString = "Hello "; 

var final String = fi rstStri ng . concat ("Worl d") ; 
alert(finalString) ; //Outputs "Hello World" 

It's somewhat more common to use the plus sign (+) for concatenation, so the same output could 
be accomplished with this: 



var final String = firstString + "World"; 



The toUpperCase and toLowerCase methods, and their brethren toLocaleUpperCase and 
toLocaleLowerCase, convert a string to all uppercase or all lowercase, respectively: 

var myString = "this is a String"; 

alert(myString.tollpperCaseO) ; // "THIS IS A STRING" 
al ert(myStri ng . toLowerCaseO) ; // "this is a string" 
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Note The toLocale methods perform conversions in a locale-specific manner. 



As I stated, numerous string properties and methods exist. The remainder of the book features 
other string properties and methods, and you can always find a complete list within the ECMA specifi- 
cation at http://www.ecma-internationol.org/publications/files/ECMA-ST/Ecma-262.pdf. 



Booleans 

Booleans are kind of a hidden, or passive, data type in JavaScript. By hidden , or passive, I mean that 
you don't work with Booleans in the same way that you work with strings and numbers; you can 
define and use a Boolean variable, but typically you just use an expression that evaluates to a Boolean 
value. Booleans have only two values, true and false, and in practice, you rarely set variables as such. 
Rather, you use Boolean expressions within tests, such as an if/then/else statement. 

Consider this statement: 

If (myNumber > 18) { 

//do something 

} 



A Boolean expression is used within the //statement's condition to determine whether the code 
within the braces will be executed. If the content of the variable myNumber is greater than the integer 
18, the Boolean expression evaluates to true; otherwise, the Boolean evaluates to false. 



Null 

Null is another special data type in JavaScript (as it is in most languages). Null is, simply, nothing. It 
represents and evaluates to false. When a value is null, it is nothing and contains nothing. However, 
don't confuse this nothingness with being empty. An empty value or variable is still full; it's just full of 
emptiness. Emptiness is different from null, which is just plain nothing. For example, defining a vari- 
able and setting its value to an empty string looks like this: 

var myVari abl e = ' ' ; 

The variable myVariable is empty, but it is not null. 

Undefined 

Undefined is a state, sometimes used like a value, to represent a variable that hasn't yet contained a 
value. This state is different from null, although both null and undefined can evaluate the same way. 
You'll learn how to distinguish between a null value and an undefined value in Chapter 5, "Using 
operators and expressions." 
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Objects 

Like functions, objects are special enough to get their own chapter (Chapter 8, to be exact). But I 
still discuss objects here briefly. JavaScript is an object-based language, as opposed to a full-blown 
object-oriented language. JavaScript implements some functionality similar to object-oriented func- 
tionality, and for most basic usages of JavaScript, you won't notice the difference. 

Objects in JavaScript are a collection of properties, each of which can contain a value. These prop- 
erties — think of them as keys — enable access to values. Each value stored in the properties can be a 
value, another object, or even a function. You can define your own objects with JavaScript, or you can 
use the several built-in objects. 

Objects are created with curly braces, so the following code creates an empty object called 
myObject : 



var myObject = {}; 

Here's an object with several properties: 

var dvdCatalog = { 

"identifier": "1", 

"name": "Coho Vineyard" 

}; 



The preceding code example creates an object called dvdCatalog, which holds two properties: one 
called identifier and the other called name. The values contained in each property are 1 and " Coho 
Vineyard", respectively. You could access the name property of the dvdCatalog object like this: 

alert (dvdCatalog. name) ; 

Here's a more complete example of an object, which can also be found in the sample code in the 
file object.txt: 

// Create four new objects 
var star = {}; 

// Create properties for each of four stars. 

star ["Pol ari s"] = new Object; 

star ["Deneb"] = new Object; 

star["Vega"] = new Object; 

star["Al tai r"] = new Object; 



Examples later in the book show how to add properties to these objects and how to access prop- 
erties. There's much more to objects, and Chapter 8 gives that additional detail. 



Arrays 

You've seen in the previous example how to create an object with a name. You can also use array 
elements that are accessed by a numbered index value. These are the traditional arrays, familiar to 
programmers in many languages. You just saw several objects, each named for a star. The following 
code creates an array with four elements. 



CHAPTER 4 Working with variables and data types 51 



var star = new ArrayO ; 
star[0] = "Polaris"; 
star[l] = "Deneb"; 
star[2] = "Vega"; 
star[3] = "Altair"; 

The same code can also be written like this, using literal notation, represented by square brackets: 

var star = ["Polaris", "Deneb", "Vega", "Altair"]; 

Arrays can contain nested values, creating an array of arrays, as in this example that combines the 
star name with the constellation in which it appears: 

var star = [["Polaris", "Ursa Mi nor"] , ["Deneb" , "Cygnus"] , ["Vega" , "Lyra"] , 

["Altai r" , "Aquila"]] ; 

Finally, although less common, you can call the ArrayO constructor with arguments: 



var star = new ArrayC'Pol ari s" , "Deneb", "Vega", "Altair"); 



Note Calling the ArrayO constructor with a single numeric argument sets the length of the 
array rather than the value of the first element, which is what you might expect. 



The new ECMA-262 edition 5 specification added several new methods for iterating and working 
with arrays. Arrays, including methods that iterate through them and work with them, are covered in 
more detail in Chapter 8. 



Defining and using variables 

Variables should be familiar to programmers in just about any language. Variables store data that 
might change during the program's execution lifetime. You've seen several examples of declaring 
variables throughout the previous chapters of this book. This section formalizes the use of variables in 
JavaScript. 



Declaring variables 

Variables are declared in JavaScript with the var keyword. The following are all valid variable 
declarations: 



var x; 
var myVar; 
var counterl; 

Variable names can contain uppercase and lowercase letters as well as numbers, but they cannot 
start with a number. Variables cannot contain spaces or other punctuation, with the exception of the 
underscore character (_). The following variable names are invalid: 
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var IstCounter; 
var new variable; 
var new. vari abl e ; 
var var; 

Take a look at the preceding example. Whereas the first three variable names are invalid because 
characters are used that aren't valid at all (or aren't valid in that position, as is the case with the first 
example), the last variable name, var, is invalid because it uses a keyword. For more information about 
keywords or reserved words in JavaScript, refer to Chapter 3, "JavaScript syntax and statements." 

You can declare multiple variables on the same line of code, as follows: 

var x, y, zeta; 

These can be initialized on the same line, too: 
var x = 1, y = "hello", zeta = 14; 

Variable types 

Variables in JavaScript are not strongly typed. It's not necessary to declare whether a given variable 
will hold an integer, a floating point number, or a string. You can also change the type of data being 
held within a variable through simple reassignment. Consider this example, where the variable x first 
holds an integer but then, through another assignment, it changes to hold a string: 

var x = 4; 

x = "Now it's a string."; 



Variable scope 

A variable's scope refers to the locations from which its value can be accessed. Variables are globally 
scoped when they are used outside a function. A globally scoped variable can be accessed throughout 
your JavaScript program. In the context of a webpage — or a document, as you might think of it — you 
can access and use a global variable throughout. 

Variables defined within a function are scoped solely within that function. This effectively means 
that the values of those variables cannot be accessed outside the function. Function parameters are 
scoped locally to the function as well. 

Here are some practical examples of scoping, which you can also find in the companion code in 
the scopel.html file: 



<scri pt type="text/javascri pt"> 
var aNewVariable = "I'm Global."; 
function doSomethi ng(i ncomi ngBi ts) { 
alert (aNewVariable) ; 
al ert (i ncomi ngBi ts) ; 

} 

doSomethi ng("An argument"); 

</scri pt> 
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The code defines two variables: a global variable called aNewVariable and a variable called 
incomingBits, which is local to the doSomethingO function. Both variables are passed to respective 
alert() functions within the doSomethingO function. When the doSomethingO function is called, the 
contents of both variables are sent successfully and displayed on the screen, as depicted in Figures 
4-2 and 4-3. 




FIGURE 4-2 The variable aNewVariable is globally scoped. 



Message from webpage 






An argument 



FIGURE 4-3 The variable incomingBits is locally scoped to the function. 

Here's a more complex example for you to try. 



Examining variable scope 

1. Using Visual Studio, Eclipse, or another editor, edit the file scoping.html in the Chapter04 
sample files folder, which you can find in the companion content. 

2 . Within the page, replace the TODO comment with the boldface code shown here (the new 
code can be found in the scoping.txt file in the companion content): 

<!doctype html> 

<html > 

<head> 

<ti tl e>Scopi ng Exampl e</ti tl e> 

<scri pt type="text/javascri pt"> 

var aNewVariable = "is global."; 
function doSomething(incomingBits) { 

alert ("Global variable within the function: " + aNewVariable); 
alert("Local variable within the function: " + incomingBits); 

} 

</scri pt> 

</head> 

<body> 

<scri pt type="text/javascri pt"> 
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doSomethingC'is a local variable"); 

alert ("Global var outside the function: " + aNewVariable) ; 
alert("Local var outside the function: " + incomingBits) ; 

</scri pt> 

</body> 

</html> 

3 . Save the file. 

4 . View the file in a web browser. The result is three alerts on the screen. 
The first alert is this: 



Message from webpage 






A 



Global variable within the function: is global. 



OK 



The second alert is this: 




The third alert looks like this: 




But wait a minute — examine the code. How many calls to the alert() function do you see? Hint: two 
are in the <HEAD> portion, and another two are within the <BODY> portion, for a total of four calls 
to the olert() function. So why are there only three alerts on the screen when four calls are made to 
the alert() function in the script? 

Because this is a section on variable scoping (and I already explained the answer), you might 
already have figured it out. But this example demonstrates well how to troubleshoot JavaScript prob- 
lems when the result isn't what you expect. 



CHAPTER 4 Working with variables and data types 55 






The next procedure requires the use of the Firebug add-on to the Mozilla Firefox web browser. If 
you don't yet have Firefox, download it from http://www.mozilla.com/firefox/. 

Installing Firebug 

This first procedure walks you through installing Firebug in Firefox. Firebug is very powerful and 
flexible. 



1. With Firefox installed, it's time to get the Firebug add-on. Accomplish this task by going to 
http://www.getfirebug.com/. On that site, click the Install Firebug link. When you do so, you'll 
be asked to choose the version of Firebug to install. Install the version that corresponds to 
your version of Firefox (or is as close as possible to the version of Firefox that you have). 

2 . When you click the install link, you'll be sent to Mozilla's site, where you get to click another 
button, this one labeled "Add To Firefox." A Software Installation dialog box opens, as shown 
in the following screen. Click Install Now. 




3 . The installation completes when you restart Firefox, so click Restart Firefox after the add-on 
finishes downloading. 
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4 . Firefox closes and opens again, showing the installed add-on. Congratulations! Firebug is 
installed. Notice a small icon in the upper-right corner of the Firefox browser window. (The 
Firefox development team keeps moving buttons around, so the Firebug button might not be 
in the upper right when you read this.) Click the icon to open the Firebug console, shown here: 




5 . Firebug's JavaScript console is disabled, but don't worry — the next procedure walks you 
through enabling and using it. Feel free to experiment with Firebug by enabling it. 

With Firebug installed, you can troubleshoot the earlier problem you encountered in the scoping 
example of only three of the four expected alerts being displayed. 

Troubleshooting with Firebug 

1. Open Firefox and open the scoping.html example that was created earlier in this chapter. The 
JavaScript code again executes as before, showing the three alerts. Close all three alerts. You 
end up with a blank page loaded in Firefox. 



CHAPTER 4 Working with variables and data types 57 



2 . Click the Firebug icon in Firefox browser window so that Firebug opens. 




3 . Click the Script tab to open the Script pane, and notice that it is disabled. Click the arrow/triangle 
next to the word Script, and click Enabled. 
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4 . Click the Console tab, click the arrow/triangle next to the word Console , and click Enabled. You 
can see here that the Console is now activated: 



"HO 



LJ Scoping Example 

^ L| tt/jsbs3e/chapter04/scoping.html 



C if - 5oogl. 



-°l * P * ' 



^ ll< 



Console 



ii 



HTML CSS Script DOM 



Clear Persist Profile T AH 1 Errors Warnings Info Debug Info 

© “Reload to activate window console" 

“enabling javascript debugger to support console" 

"enabling javascript debugger to support JavaScriptTool" 



uuu 
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5 . With both the Console and Script panes enabled, click the Reload button on the main Firefox 
toolbar. The page reloads, and the JavaScript executes again. All three alerts are displayed 
again, but notice now that Firebug has discovered an error, denoted by the red X indication in 
the Firebug Console: 




6 . The error, as you can see, is that the variable incomingBits isn't defined. This window also 
shows the line number at which the problem occurred. However, notice that because of the 
way the document is parsed, the line number in your original source code might not always be 
accurate. Regardless, you can see that incomingBits is not defined within the <BODY> section 
of the webpage because its scope is limited to the doSomethingO function. 

This procedure demonstrated not only the use of Firebug but also the effect of local versus global 
scoping of variables. Firebug is an integral part of JavaScript (and webpage) debugging. I invite you 
to spend some time with Firebug on just about any site to see how JavaScript, CSS, and HTML all 
interact. 

In this procedure, the fix would be to define the variable incomingBits so that it gets instantiated 
outside the function call. (This new line of code follows and is in the file scoping-fixed.html in the 
ChapteKM folder in the companion content.) Because this variable was defined only as part of the 
function definition, the variable didn't exist outside the function's scope. 

<!doctype html> 

<html > 

<head> 

<ti tl e>Scopi ng Exampl e</ti tl e> 

<scri pt type="text/javascri pt"> 
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var aNewVariable = "is global."; 
function doSomethi ng(i ncomi ngBi ts) { 

alert("Global variable within the function: " + aNewVariable); 
alert ("Local variable within the function: " + i ncomi ngBi ts) ; 

} 

</scri pt> 

</head> 

<body> 

<scri pt type="text/javascri pt"> 

var i ncomi ngBi ts = " must be defined if necessary."; 
doSomethi ng("i s a local variable"); 

alert("Global var outside the function: " + aNewVariable); 
alert("Local var outside the function: " + i ncomi ngBi ts) ; 

</scri pt> 

</body> 

</html > 

You can find more information about functions in Chapter 7, "Working with functions." 



The Date object 

The Dote object includes many methods that are helpful when working with dates in JavaScript — too 
many, in fact, to examine in any depth in a broad-based book such as this — but I do show you some 
examples that you might incorporate in your projects. 

One of the unfortunate aspects of the Date object in JavaScript is that the implementation of its 
methods varies greatly depending on the browser and the operating system. For example, consider 
this code to return a date for the current time, adjusted for the local time zone and formatted auto- 
matically by the toLocaleDateStringO method: 

var myDate = new Date(); 

al ert (myDate . toLocal eDateStri ng()) ; 

When run in Internet Explorer 10 on a computer running Windows 8, the code results in a date like 
that shown in Figure 4-4. 




FIGURE 4-4 The toLocaleStringQ method of the Date object in Internet Explorer 8. 
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Figure 4-5 shows what happens when that same code is executed in Firefox 12 on a Mac. 



05 / 12/2012 



OK 

FIGURE 4-5 The toLocaleStringO method of the Date object displays the message differently in Firefox on Mac. 

The difference between these two dialog boxes might seem trivial, but if you were expecting to 
use the day of the week in your code (Monday, in the examples), you'd be in for a surprise. And don't 
be fooled into thinking that the implementation issues are merely cross-operating system problems. 
Differences in the implementation of the Date object and its methods exist in browsers on products 
running Microsoft Windows as well. 

The only way to resolve these and other implementation differences in your JavaScript applica- 
tion is to perform both cross-browser and cross-platform tests. Doing so adds time to the application 
development cycle, but finding and fixing a problem during development is probably less costly than 
finding and fixing the problem after users discover it in a production environment. 

The Date object can be handed a number of arguments, ranging from zero arguments to up to 
seven arguments. When the Date object constructor is passed a single string argument, the string is 
assumed to contain the date. When it is passed a number type of argument, the argument is assumed 
to be the date in milliseconds since January 1, 1970, and when it is passed seven arguments, they're 
assumed to be the following: 

new Date(year, month, day, hours, minutes, seconds, milliseconds) 



Note Only year and month are required arguments; the others are optional. 



Remember the following points when using a Date object: 

■ The year should be given with four digits unless you want to specify a year between the year 
1900 and the year 2000, in which case you'd just send in the two-digit year, 0 through 99, 
which is then added to 1900. So, 2008 equals the year 2008, but 98 is turned into 1998. 

■ The month is represented by an integer 0 through 11, with 0 being January and 11 being 
December. 

■ The day is an integer from 1 to 31. 

■ Hours are represented by 0 through 23, where 23 represents 11 P.M. 

■ Minutes and seconds are both integers ranging from 0 to 59. 

■ Milliseconds are an integer from 0 to 999. 
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Although the following procedure uses some items that won't be covered until later chapters, 
you're looking at the Date object now, so it's a good time learn how to write the date and time to a 
webpage — a popular operation. 



Writing the date and time to a webpage 

1. Using Visual Studio, Eclipse, or another editor, edit the file writingthedate.html in the 
ChapteKM sample files folder in the companion content. 

2 . Within the page, add the code in boldface type shown here: 

<!doctype html> 

<html > 

<head> 

<title>the date</title> 

</head> 

<body> 

<p id="dateField"> </p> 

<script type = "text/javascri pt"> 

var myDate = new Date() ; 

var dateString = myDate. toLocaleDateSt ring () + " " + myDate. toLocaleTimeSt ring () ; 

var dateLoc = document . getEl ementById("dateFiel d") ; 

dateLoc . innerHTML = "Hello - Page Rendered on " + dateString; 

</scri pt> 

</body> 

</html> 



3. When saved and viewed in a web browser, you should receive a page like this (although the 
date you see will be different from what's shown here): 




The relevant JavaScript from the preceding steps is repeated here: 

var myDate = new DateO; 

var dateString = myDate . toLocal eDateStri ng() + " " + myDate. toLocaleTimeStringO ; 

var dateLoc = document . getEl ementById("dateFiel d") ; 

dateLoc . i nnerHTML = "Hello - Page Rendered on " + dateString; 



CHAPTER 4 Working with variables and data types 63 



The JavaScript related to the Date object is rather simple. It takes advantage of the 
toLocaleDateStringO method, which you've already seen, and its cousin, toLocaleTimeStringO, which 
returns the local time. These two methods are concatenated together with a single space and placed 
into the dateString variable, like this: 

var dateString = myDate . toLocal eDateStri ng() + " " + myDate. toLocaleTimeStringO ; 

The remainder of the code writes the contents of the dateString variable to the webpage, which is 
covered in more detail in Part 2. 



Counting down to a certain date in the future 

1. Using Visual Studio, Eclipse, or another editor, edit the file countdown.html in the Chapter04 
sample files folder, which you can find in the companion content. 

2 . Add the following code shown in boldface type to the page: 



<!doctype html> 

<html > 

<head> 

<title>the date</title> 

</head> 

<body> 

<p id="dateField"> </p> 

<script type = "text/javascri pt"> 

var today = new DateO ; 

var then = new DateO I 

// January 1, 2014 

then . set Ful 1 Year (2014 ,0,1); 

var diff = then . getTimeO - today . getTi me () ; 

diff = Math. floor (diff / (1000 * 60 * 60 * 24)); 

var dateLoc = document .getElementById("dateField") ; 

dateLoc. innerHTML = "There are " + diff + " days until 1/1/2014"; 

</scri pt> 

</body> 

</html> 
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3 . Save the page, and view it in a web browser. Depending on the date on your computer, the 
number of days represented will be different, but the general appearance of the page should 
look like this: 





Tip Be careful when using JavaScript dates for anything other than displaying them. 
Because the dates are dependent on the visitor's time, don't rely on them when an accurate 
time might be important — for example, in an ordering process. 



The exercise you just completed used some additional functions of both the Math and Date 
objects, namely floor() and getTime(). While this book covers a lot of ground, it's not a complete 
JavaScript language reference. For that and even more information, refer to the ECMA-262 standard 
at http://www.ecma-intemational.org/publications/standards/Ecma-262.htm. 

The next procedure shows how to calculate (or better yet, roughly estimate) the time it takes for a 
webpage to load in a person's browser. 



Note The next procedure isn't accurate because it doesn't take into consideration the 
time required for the loading and rendering of images (or other multimedia items), which 
are external to the text of the webpage. A few more bits load after the script is finished 
running. 
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Calculating render time 

1. Using Visual Studio, Eclipse, or another editor, edit the file render.html in the ChapteKM 
sample files folder, which you can find in the companion content. 

2 . Add the following code shown in boldface type to the page: 



<!doctype html> 

<html > 

<head> 

<title>the date</title> 

<script type = "text/javascri pt"> 
var started = new DateO; 
var now = started .getTimeO ; 

</scri pt> 

</head> 

<body> 

<p id="dateField"> </p> 

<script type = "text/javascri pt"> 

var bottom = new DateO I 

var diff = (bottom. getTimeO - now)/1000; 

var finaltime = diff . toPrecision(S) ; 

var dateLoc = document . getEl ementById("dateFiel d") ; 

dateLoc. innerHTML = "Page rendered in " + final time + " seconds."; 

</scri pt> 

</body> 

</html> 

3 . Save the page, and view it in a web browser. Depending on the speed of your computer, web 
server, and network connection, you might receive a page that indicates only 0 seconds for 
the page load time, like this: 
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4. If your page takes 0.0000 seconds, as mine did, you can introduce a delay into the page so 
that you can test it. (I'd never recommend doing this on a live site because I can't think of 
a reason you'd want to slow down the rendering of your page! But introducing a delay can 
come in handy for testing purposes.) Using a for loop is a cheap and easy way to slow down 
the JavaScript execution: 

for (var i = 0; i < 1000000; i++) { 

//delay 



} 

The value I chose, 1000000, is arbitrary. You might need to choose a larger or smaller number 
to cause the desired delay. The final code looks like this: 

<!doctype html> 

<html > 

<head> 

<title>the date</title> 

<script type = "text/javascri pt"> 
var started = new DateO; 
var now = started. getTimeO ; 
for (var i = 0; i < 1000000; i++) { 

//del ay 

} 

</scri pt> 

</head> 

<body> 

<p id="dateField"> </p> 

<script type = "text/javascri pt"> 

var bottom = new DateO; 

var diff = (bottom. getTimeO - now)/1000; 

var finaltime = diff .toPrecision(5) ; 

var dateLoc = document . getEl ementById("dateFiel d") ; 

dateLoc. innerHTML = "Page rendered in " + final time + " seconds."; 

</scri pt> 

</body> 

</html> 
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5. Save the page, and view it again in a web browser. You should see some delay in the page 
load, which causes the value to be a positive number: 




When using this or similar functions to determine the page load times, to calculate the most 
accurate value, place the initial variable near the top of the page or script, and then place 
another one near the bottom of the page. 



Note The now() method of the DoteQ object can also be used as a substitute for getTimeQ. 



You just learned about a few of the more than 40 methods of the Date object. Many of these 
methods have UTC (Coordinated Universal Time) counterparts, meaning that they can get or set the 
date and time in UTC rather than local time. Table 4-4 lists the methods that return dates. With the 
exception of getTime() and getTimezoneOffset(), all these methods have UTC counterparts that are 
called using the format getUTCDateQ , getUTCDayQ, and so on. 



TABLE 4-4 The get methods of the Date object 



Method 


Description 


getDate() 


Returns the day of the month 


getDayO 


Returns the day of the week 


getFullYear() 


Returns the four-digit year and is recommended in most circumstances over the getYearQ method 


getHours() 


Returns the hours of a date 


getMillisecondsO 


Returns the milliseconds of a date 


get MinutesO 


Returns the minutes of a date 


getMonth() 


Returns the month of a date 


getSecondsO 


Returns the seconds of a date 


getTimeQ 


Returns the milliseconds since January 1, 1970 


getTimezoneOffsetQ 


Returns the number of minutes calculated as the difference between UTC and local time 
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Many of the get...() methods have siblings prefixed with set , as shown in Table 4-5. And like their 
get brethren, most of the set...() methods have UTC counterparts, except for setTimeQ. 



TABLE 4-5 The set methods of the Date object 



Method 


Description 


setDate() 


Sets the day of the month of a date 


setFullYear() 


Sets the four-digit year of a date; also accepts the month and day-of-month integers 


setHoursO 


Sets the hour of a date 


setMilliseconds() 


Sets the milliseconds of a date 


setMinutes() 


Sets the minutes of a date 


setMonth() 


Sets the month as an integer of a date 


setSeconds() 


Sets the seconds of a date 


setTimeQ 


Sets the time using milliseconds since January 1, 1970 



The Date object also has several methods for converting the date to a string in a different format. 
You already reviewed some of these methods, such as toLocaleDateString(). Other similar methods 
include toLocaleStringO, toLocaleTimeStringO, toStringO, tolSOStringO, toDateStringO, toUTCStringO, 
and toTimeStringO. Feel free to experiment with these, noting that tolSOStringO is a new method in 
the ECMA-262 version 5 specification and support for it might not be available in all browsers. (It's 
notably missing from most versions of Internet Explorer.) The following simple one-line code exam- 
ples will get you started experimenting. Try typing them in the address bar of your browser: 



javascript :var myDate = new DateO 
javascript :var myDate = new DateO 
javascri pt : var myDate = new DateO 
javascript :var myDate = new DateO 
javascript: var myDate = new DateO 
javascri pt : var myDate = new DateO 
javascript: var myDate = new DateO 
javascript: var myDate = new DateO 
javascri pt : var myDate = new DateO 



al e rt (myDate . toLocal eDateSt ri ng () ) ; 
al ert (myDate. toLocaleStri ng()) ; 
al e rt (myDate . toGMTSt ri ng () ) ; 
al ert (myDate . toLocal eTi meStri ng()) ; 
alert (myDate. toStringO) ; 
al ert (myDate . toISOStri ng()) ; 
alert (myDate. toDateStringO) ; 
alert (myDate. toUTCStringO) ; 
alert (myDate. toTimeStringO) ; 



You can also write these code samples without creating the myDate variable, like so: 



javascript: alert (new DateO . toUTCStri ng()) ; 
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Using the RegExp object 



Regular expressions are the syntax you use to match and manipulate strings. If you've heard of or 
worked with regular expressions before, don't be alarmed. Regular expressions have an unnecessarily 
bad reputation solely because of their looks. And, lucky for me, we shouldn't judge things solely on 
looks alone. With that said, if you've had a bad experience with regular expressions, I'd ask that you 
read through this section with an open mind and see whether my explanation helps clear up some 
confusion. 

The primary reason that I have confidence in your ability to understand regular expressions is that 
you're a programmer, and programmers use logic to reduce problems to small and simple pieces. 
When writing or reading a regular expression, the key is to reduce the problem to small pieces and 
work through each. 

Another reason to have confidence is that you've probably worked with something close to regular 
expressions before, so all you need to do is extend what you already know. If you've worked with a 
command prompt in Microsoft Windows or with the shell in Linux/Unix, you might have looked for 
files by trying to match all files using an asterisk, or star (*) character, as in: 

dir *.* 



or: 

di r * . txt 

If you've used a wildcard character such as the asterisk, you've used an element akin to a regular 
expression. In fact, the asterisk is also a character used in regular expressions. 

In JavaScript, regular expressions are used with the RegExp object and some syntax called regular 
expression literals. These elements provide a powerful way to work with strings of text or alphanumer- 
ics. The ECMA-262 implementation of regular expressions is largely borrowed from the Perl 5 regular 
expression parser. Here's a regular expression to match the word JavaScript : 

var myRegex = /DavaScri pt/; 

The regular expression shown would match the string "JavaScript" anywhere that it appeared 
within another string. For example, the regular expression would match in the sentence "This is a book 
about JavaScript," and it would match in the string "ThisIsAJavaScriptBook," but it would not match 
"This is a book about javascript," because regular expressions are case sensitive. (You can change this, 
as you'll see later in this chapter.) 

With that short introduction you're now prepared to look at regular expressions in more detail. 

The knowledge you gain here will prepare you for the remainder of the book, helping you not only 
understand how to work with strings in JavaScript but also understand how to use regular expres- 
sions in other languages. This section provides a reference for regular expression syntax and shows a 
couple simple examples. 
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The syntax of regular expressions 

Regular expressions have a terse — and some would argue cryptic — syntax. But don't let terse syntax 
scare you away from regular expressions, because in that syntax is power. This is a brief introduction 
to regular expressions. It's not meant to be exhaustive. (There are entire books on regular expres- 
sions.) However, you'll find that this gentle introduction will serve you well for the remainder of the 
book. Don't worry if this material doesn't sink in on the first read through. There are multiple tables 
that make it easy to use as a reference later. 

The syntax of regular expressions includes several characters that have special meaning, includ- 
ing characters that anchor the match to the beginning or end of a string, a wildcard, and groups of 
characters, among others. 

Table 4-6 shows several of the special characters. 



TABLE 4-6 Common special characters in JavaScript regular expressions 



Character 


Description 


A 


Sets an anchor to the beginning of the input. 


$ 


Sets an anchor to the end of the input. 




Matches any character. 


* 


Matches the previous character zero or more times. Think of this as a wildcard. 


+ 


Matches the previous character one or more times. 


? 


Matches the previous character zero or one time. 


0 


Places any matching characters inside the parentheses into a group. This group can then be referenced 
later, such as in a replace operation. 


{n,} 


Matches the previous character at least n times. 


{n,m} 


Matches the previous character at least n but no more than m times. 


[] 


Defines a character class to match any of the characters contained in the brackets. This character can use 
a range like 0-9 to match any number or like a-z to match any letter. 


[ A ] 


The use of a caret within a character class negates that character class, meaning that the characters in 
that class cannot appear in the match. 


\ 


Typically used as an escape character, and meaning that whatever follows the backslash is treated as a 
literal character instead of as having its special meaning. Can also be used to define special character 
sets, which are shown in Table 4-7. 



In addition to the special characters, several sequences exist to match groups of characters or 
nonalphanumeric characters. Some of these sequences are shown in Table 4-7. 



TABLE 4-7 Common character sequences in JavaScript regular expressions 



Character 


Match 


\b 


Word boundary. 


\B 


Nonword boundary. 


\c 


Control character when used in conjunction with another character. For example, \cA is the escape 
sequence for Control-A. 


\d 


Digit. 
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Character 


Match 


\D 


Nondigit. 


\n 


Newline. 


\r 


Carriage return. 


\s 


Single whitespace character such as a space or tab. 


\s 


Single nonwhitespace character. 


\t 


Tab. 


\w 


Any alphanumeric character, whether number or letter. 


\W 


Any nonalphanumeric character. 



And finally, in addition to the characters in Table 4-7, you can use the modifiers /, g, and m. The / 
modifier specifies that the regular expression should be parsed in a case-insensitive manner, while the 
g modifier indicates that the parsing should continue after the first match, sometimes called global or 
greedy (thus the g). The m modifier is used for multiline matching. You'll see an example of modifier 
use in an upcoming example. 

The RegExp object has its own methods, including exec and test, the latter of which tests a regular 
expression against a string and returns true or false based on whether the regular expression matches 
that string. However, when working with regular expressions, using methods native to the String type, 
such as match, search, split, and replace, is just as common. 

The exec() method of the RegExp object is used to parse the regular expression against a string 
and return the result. For example, parsing a simple URL and extracting the domain might look like 
this: 

var myString = "http://www.braingia.org"; 
var myRegex = /http:\/\/\w+\- (.*)/i ; 
var results = myRegex. exec (mySt ri ng) ; 
alert(results[l]) ; 

The output from this code is an alert showing the domain portion of the address, as shown in 
Figure 4-6. 




FIGURE 4-6 Parsing a typical web URL using a regular expression. 

A breakdown of this code is helpful. First you have the string declaration: 
var myString = "http://www.braingia.org"; 
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This is followed by the regular expression declaration and then a call to the execO method, which 
parses the regular expression against the string found in myString and places the results into a vari- 
able called results. 

var myRegex = /http:\/\/\w+\- (.*)/i ; 
var results = myRegex. exec (mySt ri ng) ; 

The regular expression contains several important elements. It begins by looking for the literal 
string http:. The two forward slashes follow, but because forward slashes (/) are special characters in 
regular expressions, you must escape them by using backslashes (\), making the regular expression 
http:\/V to this point. 

The next part of the regular expression, \w, looks for any single alphanumeric character. Web 
addresses are typically www, so don't be confused into thinking that the expression is looking for 
three literal i/i/s — the host in this example could be called web , hostl, myhost , or www, as shown in 
the code you're examining. Because \w matches any single character, and web hosts typically have 
three characters (www), the regular expression adds a special character + to indicate that the regu- 
lar expression must find an alphanumeric character at least once and possibly more than once. So 
now the code has http:\/V\w+, which matches the address http://www right up to the .braingia.org 
portion. 

You need to account for the dot character between the host name (www) and the domain name 
(braingia.org). You accomplish this by adding a dot character (.), but because the dot is also a special 
character, you need to escape it with \.. You now have http:\/\/\w+\., which matches all the elements 
of a typical address right up to the domain name. 

Finally, you need to capture the domain and use it later, so place the domain inside parentheses. 
Because you don't care what the domain is or what follows it, you can use two special characters: the 
dot, to match any character; and the asterisk, to match any and all of the previous characters, which is 
any character in this example. You're left with the final regular expression, which is used by the exec() 
method. The result is placed into the results variable. Also note the use of the / modifier, to indicate 
that the regular expression will be parsed in a case-insensitive manner. 

If a match is found, the output from the exec() method is an array containing the last characters 
matched as the first element of the array and an index for each captured portion of the expression. 

In the example shown, the second element of the array (1) is sent to an alert, which produces the 
output shown in Figure 4-6. 

alert(results[l]) ; 

That's a lot to digest, and I admit this regular expression could be vastly improved with the addi- 
tion of other characters to anchor the match and to account for characters after the domain as well 
as non-alphanumerics in the host name portion. However, in the interest of keeping the example 
somewhat simpler, the less-strict match is shown. 

The String object type contains three methods for both matching and working with strings and 
uses regular expressions to do so. The match, replace, and search methods all use regular expression 
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pattern matching. Because you've learned about regular expressions, it's time to introduce these 
methods. 

The match method returns an array with the same information as the Regexp data type's exec() 
method. Here's an example: 

var email Addr = "suehring@braingia.com"; 
var myRegex = /\.com/; 

var checkMatch = emailAddr.match(myRegex) ; 
alert(checkMatch[0]) ; //Returns .com 

This can be used in a conditional to determine whether a given email address contains the string 
.com: 



var email Addr = "suehring@braingia.com"; 
var myRegex = /\.com/; 

var checkMatch = emailAddr.match(myRegex) ; 
if (checkMatch !== null) { 

alert(checkMatch[0]) ; //Returns .com 

} 



The search method works in much the same way as the match method but sends back only the 
index (position) of the first match, as shown here: 



var email Addr = "suehri ng@brai ngia. com" ; 
var myRegex = /\.com/; 

var searchResult = emai 1 Addr . search (myRegex) ; 
alert(searchResul t) ; //Returns 17 

If no match is found, the search method returns -1. 

The replace method does just what its name implies — it replaces one string with another when a 
match is found. Assume in the email address example that I want to change any .com email address to 
a .net email address. You can accomplish this by using the replace method, like so: 

var email Addr = "suehring@braingia.com"; 
var myRegex = /\.com$/; 
var replaceWith = ".net"; 

var result = emai 1 Addr. replace(myRegex, replaceWith) ; 
alert(resul t) ; //Returns suehring@braingia.net 

If the pattern doesn't match, the original string is placed into the result variable; if it does, the new 
value is returned. 



Note You can use several special characters to help with substitutions. Please see the 
ECMA-262 specification for more information about these methods. 



Later chapters show more examples of string methods related to regular expressions. Feel free to 
use this chapter as a reference for the special characters used in regular expressions. 
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References and garbage collection 

Some types of variables or the values they contain are primitive, whereas others are reference types. 
The implications of this might not mean much to you at first glance — you might not even think you'll 
ever care about this. But you'll change your mind the first time you encounter odd behavior with a 
variable that you just copied. 

First, some explanation: objects, arrays, and functions operate as reference types , whereas num- 
bers, Booleans, null, and undefined are known as primitive types. According to the ECMA-262 speci- 
fication, other primitive types exist, such as Numbers and Strings, but Strings aren't relevant to this 
discussion. 

When a number is copied, the behavior is what you'd expect: The original and the copy both get 
the same value. However, if you change the original, the copy is unaffected. Here's an example: 

// Set the value of myNum to 20. 
var myNum = 20; 

// Create a new variable, anotherNum, and copy the contents of myNum to it. 

// Both anotherNum and myNum are now 20. 
var anotherNum = myNum; 

// Change the value of myNum to 1000. 
myNum = 1000; 

// Display the contents of both variables. 

// Note that the contents of anotherNum haven't changed, 
al ert (myNum) ; 
al ert(anotherNum) ; 

The alerts display 1000 and 20, respectively. When the variable anotherNum gets a copy of 
myNum's contents, it holds on to the contents no matter what happens to the variable myNum after 
that. The variable does this because numbers are primitive types in JavaScript. 

Contrast that example with a variable type that's a reference type, as in this example: 



// Create an array of three numbers in a variable named myNumbers. 
var myNumbers = [20, 21, 22]; 

// Make a copy of myNumbers in a newly created variable named copyNumbers. 
var copyNumbers = myNumbers; 

// Change the first index value of myNumbers to the integer 1000. 
myNumbers [0] = 1000; 

// Alert both, 
al ert(myNumbers) ; 
al ert(copyNumbers) ; 

In this case, because arrays are reference types, both alerts display 1000,21,22, even though only 
myNumbers was directly changed in the code. The moral of this story is to be aware that object, array, 
and function variable types are reference types, so any change to the original changes all copies. 

Loosely related to this discussion of differences between primitive types and reference types is 
the subject of garbage collection. Garbage collection refers to the destruction of unused variables by 
the JavaScript interpreter to save memory. When a variable is no longer used within a program, the 
interpreter frees up the memory for reuse. It also does this for you if you're using Java Virtual machine 
or.NET Common Language Runtime. 
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This automatic freeing of memory in JavaScript is different from the way in which other languages, 
such as C++, deal with unused variables. In those languages, the programmer must perform the gar- 
bage collection task manually. This is all you really need to know about garbage collection. 



Learning about type conversions 

Before finishing the discussion on data types and variables, you should know a bit about type conver- 
sions, or converting between data types. JavaScript usually performs implicit type conversion for you, 
but in many cases, you can explicitly cast, or convert, a variable from one type to another. 



Number conversions 

You've already seen a conversion between two number formats, hexadecimal to base 10, in the 
example discussed in the section "Data types in JavaScript" earlier in this chapter. However, you can 
convert numbers to strings as well. JavaScript implicitly converts a number to a string when the num- 
ber is used in a string context. 

To explicitly convert a number to a string, cast the number as a string, as in this example: 

// Convert myNumString as a string with value of 100 
var myNumString = String(lOO); 



String conversions 

In the same way that you can convert numbers to strings, you can convert strings to numbers. You do 
this by casting the string as a number. 

var myNumString = "100"; 

var myNum = Number(myNumStri ng) ; 




Tip JavaScript converts strings to numbers automatically when those strings are used in a 
numeric context. However, in practice, I've had hit-or-miss luck with this implicit conver- 
sion, so I usually just convert to a number whenever I want to use a number. The downside 
of doing this is that you have to execute some extra code, but doing that is better than the 
uncertainty inherent in leaving it up to a JavaScript interpreter. 



Boolean conversions 

Booleans are converted to numbers automatically when used in a numeric context. The value of true 
becomes 1, and the value of false becomes 0. When used in a string context, true becomes "true", 
and false becomes "false". The Booleanf) function exists if you need to explicitly convert a number or 
string to a Boolean value. 
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Exercises 



1. Declare three variables — one number and two strings. The number should be 120, and the 
strings should be "5150" and "Two Hundred Thirty". 

2 . Create a new array with three numbers and two strings or words. 

3 . Use the olert() function to display the following string, properly escaped: Steve's response was 
"Cool!" 

4 . Use Internet Explorer to examine three of your favorite websites, and debug the errors using 
Interne Explorer tools. Look closely for any JavaScript errors reported. Bonus: Try using 
Firebug to examine those same three websites. 
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$.ajax() function, 330 

$(), as jqueryO function shortcut, 175 

$, in regular expressions, 71 

$(this) selector, 240 

/* and */, for multiline comment, 31 

* (asterisk) 

as multiplication operator, 80 
in regular expressions, 71 
\ (backslash), for escaping character, 47 
~ (bitwise NOT operator), 86 
A character, in regular expressions, 71 
{ } (curly braces), for objects, 51, 137 
. (dot) in regular expressions, 71 
! (exclamation point), as logical NOT operator, 86 

# (hash symbol), for ID selectors, 279 

- (minus sign), to create negative number, 86 
% (percent sign), as modulo operator, 81 
| (pipe character), for logical OR, 105 
+ (plus sign) 

for concatenation, 49 
converting to number with, 86 
in regular expressions, 71 
? (question mark) 

in regular expressions, 71 
as ternary operator, 106 

; (semicolon), to delineate expressions, 32-33, 34 
// (slashes) for single-line comment, 31 

A 

about:blank page, opening default, 227 
abs function property of Math object, 46 
action attribute of <form> element, 23 
Active Server Pages (ASP) page, for server-side 
program, 341 



ActiveXObject object, 335 
addClassO function (jQuery), 286 
addEventListener() method, 153, 217 
additive operators, 80 
add() method, 220 

Add New Item dialog box (Visual Studio), 20, 24 
addNumbers() function, 122 
.after() function (jQuery), 189-190 
AJAX (Asynchronous JavaScript and XML), 10, 18, 327, 
335-352 
basics, 329-330 
eval() method in, 149 
jQuery and, 330, 348-352 
jQuery Mobile linking without, 316-317 
for loading jQuery Mobile links, 314 
POST method and, 346-348 
processing headers, 345-346 
processing response, 339 
processing XML responses, 343-344 
sending data to server, 351-352 
sending request, 337-338 
without XML, 330-331 
XMLHttpRequest object, 335-348 
instantiating, 335-337 
.ajax() function (jQuery), 330, 348-349, 351 
data parameter, 351 
options, 352 

alert() function, 7, 21, 23, 25, 43, 429, 431, 433, 436 
for debugging, 27 

for feedback during form validation, 257 
scope and, 55 
alt tags, 13 

anchor (<A>) elements, target attribute of, 228 
anonymous functions, 126,238 
appendChild() method, 208 
.append() function (jQuery), 189 
Application Compatibility Virtual PC Images, 15 
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Application Programming Interface (API), 15 

app package, creating, 398 

<AREA> tag of an image map, 253 

arguments for functions, 23 

arguments object, 120 

ArrayO constructor, 52 

arrays, 51-52, 141-148 

converting elements to joined string, 144-145 

deleting index of, 87 

for... in loops to iterate through, 115 

of images, 246 

iterating through, 147-148 

length property, 142 

methods, 142-148 

push and pop methods to add and remove 
elements, 145 

shift and unshift to add and remove 
elements, 145-146 
slice() to return parts, 146 
sorting elements, 146-147 
using for loop with, 112-113 
for weather app, 388 
ASP.NET Development Server, 18 
starting, 22 

assignment operators, 90-91 
asynchronous AJAX requests, 337-338 
processing response, 340 
async option, for .ajax() function, 352 
attachEvent() method, 153, 217, 218 
attr() function (jQuery), 208 
attributes 

Document Object Model and, 204-208 
of HTML elements, 195 
selecting elements by, 181-182 
auto-initialization event, global change to 
transitions, 315 

availHeight property of screen object, 155 
availWidth property of screen object, 155 

B 

back-end server-side data components, 328 
background music, 14 
back() method, 166 

backslash (\), for escaping character, 47 
backspace, 47 

.before() function (jQuery), 189 
behavioral separation, 14 

behavior component in web application, 327, 328 



binding event handlers, 220-222 
Bing Maps, 329 

bitwise NOT operator (~), 85, 86 
bitwise operators, 81 

Blank App template (Visual Studio), 372-374 
<BLINK> tag (HTML), 13 
blocked content, Internet Explorer alert about 
viewing, 435 
blur() method, 153 

<BODY> tag (HTML), JavaScript within, 7, 33 
bookmark page 
CSS for, 309 
HTML for, 309 
jQuery Mobile for, 308 
Boolean data type, 50 
conversions, 76 

Boolean expressions, for if statement, 94 
Boolean() function, 76 
border, CSS to create, 296 
break statement, 107 
Browser Object Model, 151-168 
hierarchy of objects, 151-152 
history object, 166-167 
location object, 160-166 
navigator object, 156-160 
screen object, 154-156 
browsers 

avoiding JavaScript in older, 224-225 
for debugging JavaScript, 27 
decision to support, 15 
detection, 4, 222 
detection problems, 156 
feature testing, 223-224 
using multiple, 13 
viewing web page in, 430, 434 
built-in functions, 36 
user-defined vs., 127 
built-in objects, 148-149 
buttons 

adding to calendar, 297 
adding to dialog, 302-305 
adding to toolbar, 321-322 
byte conservation, 91 

C 

cache option, for .ajax() function, 352 
caching, external JavaScript file and, 34 
calendar 
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currentStyle array property 



customizing, 296-299 
adding buttons, 297 

adding month and year drop-down lists, 298 
displaying multiple months, 297-298 
limiting date range, 298 
jQuery Ul for creating, 294-299 
callAJAX function, 386 
callback functions (jQuery), 190 
camelCase, 280 
cancelBubble property, 219 
carriage return, 33, 47 

in regular expressions, 72 
Cascading Style Sheets (CSS) 
applying, 279-280 
basics, 277-280 

customizing in weather app, 393-394 
for bookmark page, 309 
in Grid App templates, 376 
for jQuery Ul demonstration file, 292 
properties and selectors, 278-279 
property names, vs. JavaScript, 281 
relationship between JavaScript and, 280-288 
retrieving styles with JavaScript, 287-288 
selectors in, 177 

setting classes with JavaScript, 285-287 
setting element styles by type, 284-285 
web standards for, 9 
case sensitivity 

of JavaScript, 29-30 
of regular expressions, 70 
catch clause, 336 

CDATA section, in JavaScript comment, 8, 33 
certification requirements for Microsoft 
approval, 379 
chaining, 187 

change() function (jQuery), 262 

changetext() function, 198 

check boxes on web forms, 265-268 

checkbox selector, 182 

checked selector, 182 

children() function, 203 

Chrome 

DOM support, 6 
class attribute for CSS, 278-279 
classes, 134-137 

setting with JavaScript, 285-287 
className property, 286 
click event, opening dialog with, 304-305 
client-side form validation, 4, 257 



client-side language, JavaScript as, 10 
client-side tasks, 10 
closed property of window object, 153 
close() method of window object, 153, 227-228 
closures, 126 
collections in HTML, 203 
color of toolbar, 322-323 
comma operator, 91 
comments, 31, 388 
in HTML, 225 

in JavaScript, for CDATA section, 8 
compound assignment operators, 90-92 
compound conditionals, 98-101 
compound statement, 35 
concatenating strings, 80 
concat() method, 49 

to add elements to end of array, 142-144 
conditionals 

for checking graphic as hover, 240 
compound, 98-101 
else if and else statements, 101-108 
if statement, 93-101 
syntax, 94-95 
multiple levels of, 102-105 
semicolon (;) and, 32 
ternary, 106 
testing 

switch statement for, 106-108 
for testing end of slide show, 246 
validating forms with, 116-118 
confirm() function, 128-131 
constructor pattern, 137 
content compliance, 380 
Content Delivery Network (CDN) 
for accessing jQuery, 173 
for jQuery Mobile, 309 
Control character, in regular expressions, 71 
cookies, 338 

counting down to future date, 64 

Create App Packages wizard, 398-402 

createElementO method of document object, 208 

createTextNode() method, 208 

Create Your Package Wizard, 356-358 

.css() function (jQuery), 185, 280 

cubemeO function, 36-38 

curly braces ({ }), for objects, 51, 137 

current object, 183 

currentStyle array property, 287 
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D 

databases, 12 

data component in web application, 327, 328 
data-id attribute, for footer, 325 
data-position attribute, for footer, 325 
data-role attributes (HTML), 308 
footer, 319 
navbar, 318 
data-roles, 313 
data security, 11 

data-theme attribute (HTML), 322 
data-transition attribute, for link, 315 
data types, 41-52 
Boolean, 50 
conversions, 76 
Null, 50 

numbers, 42-46 
strings, 47-50 

data-win-bind attribute, of img element, 390 
date 

converting to string, 69 
counting down to future date, 64 
writing to webpage, 63-64 
Date object, 61-69 
get methods, 68 
nowQ method of, 68 
set methods, 69 
toLocaleStringO method of, 61 
datepicker page, HTML to create, 295-296 
debugging JavaScript, 27 

Debug menu (Visual Studio), Start Debugging, 22, 
373, 384, 389 
declaration 

of functions, 37,431 
of variables, 52-53 
decrementing, 85-86 

defaultStatus property of window object, 153 
delay in pageload fortesting, 67 
delete operator, 87-88 
delete unary operator, 85 
deleting DOM elements, 210-212 
descendants of DOM tree node, 196 
detachEvent() method of window object, 153 
developer account, 399 

developer license for Windows 8 development, 368 
development version of jQuery, 173 
dialog box 

adding, 299-305 



adding buttons, 302-305 
alert() function to display, 7 
modal, creating, 301-302 
dialogO function, 299, 303 
dialog functions, 127-131 
digit, in regular expressions, 71 
directories. See folders 

display component in web application, 327, 328 
distributing Windows 8 apps, 358-359 
in enterprise, 359 
division operator, 80 
DOCTYPE declarations, 9 
document child of window object, 152 
document object, 236 
anchors collection, 203 
createElement() method, 208 
forms collection, 203 
images collection, 203 
links collection, 203 
to create HTML, 159 
Document Object Model (DOM), 5-6 
attributes in, 204-208 
creating elements, 208-210 
defined, 193-196 
as tree, 194 
level 0, 194 
levels 1-3, 194 
deleting elements, 210-212 
and hover, 237 

methods to process XML response, 343 
nodes in tree structure, 196 
retrieving elements, 196-203 
by ID, 196-200 
by tag name, 200-203 
setting ID, 209-213 
siblings, 203 

traversing with jQuery, 183-188 
DOM 0 event model, 216 
domains, JavaScript and, 11 
dot notation, 46, 48 
dot operator ("."), for methods, 127 
do. ..while statement, 110-111 
Download Builder, for jQuery Mobile, 310 
downloading 

jQuery, 173-174 
jQuery Mobile, 310-311 
Visual Studio Express for Windows 8 
installer, 364 

downward compatibility, 15 
drop-downs, 261. See also select boxes 
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<FORM> elements 



DTD (DOCTYPE declaration), 9 

E 

.each() function (jQuery), 183, 185 
Eclipse 

external JavaScript files in, 431-434 
writing JavaScript with, 425-434 
Eclipse Classic, 425 
ECMA-262 specification, 4, 65, 142 
ECMAScript, 3, 4-5, 335 
effect() function, 294 
EHandler.add() method, 246 
ehandler.js script, 243, 245, 259 
Eich, Brendan, 3 
else if statements, 101-108 
else statements, 101-108 
emptyO function (jQuery), 212 
empty string, null vs., 50 
encodellRIComponentO method, 149 
encodellRI() method, 148, 149 
endless loop, 109 

enterprise, Windows 8 app distribution, 359 
equality operators, 81-83 
error handling, .ajax() function for, 351 
escape sequences, 47-48 
escaping characters, in AJAX request, 338 
European Computer Manufacturers Association 
(ECMA), 4 

eval() function, 38, 39, 149 
Event Bubbling, 217 
Event Capture, 217 
event-driven, JavaScript as, 7 
event handlers 

binding and unbinding, 220-222 
generic, 219-220 
registering, 167 
event models, 215-219 
DOM 0, 216 

W3C and Internet Explorer, 216 
events, 152 

in jQuery, 220,231-233 
of window object, 215-222 
every() method, 148 
exceptions, try/catch block and, 336-337 
exclamation point (!), as logical NOT operator, 86 
exec method, of RegExp object, 72 
expressions, 6 

; (semicolon) to delineate, 32-33 



Extensible Hypertext Markup Language (XHTML) 
JavaScript and, 8 
JavaScript declaration within, 33 
Extensible Markup Language (XML), 6 
AJAX without, 330-331 
external CSS file, 279 
external JavaScript files 
advantages, 34 
using without IDE, 436-438 
Visual Studio and, 23-27 

F 

fade page transition, 315 
File menu (Visual Studio) 

New File, 20, 24 
New Project, 370, 383 
New Web Site, 19 
Open Project, 24 
file names in Notepad, 435 
filter() method, 148 
finally statement (JavaScript), 337 
Firebug add-on, 27, 56 
Console tab, 59 
installing, 56-57 
Script tab, 58 

troubleshooting with, 57-61 
Firefox, 4 

DOM support, 6 

navigation object properties for, 158 
User Agent Switcher add-on, 157 
firstChild property, 203 
floor() function, 65 
focus() method, 153 
folders 

for jQuery Mobile, 311 
in jQuery Ul download, 290 
footer navigation bar, 319-321 
for each. ..in loop, 115-116 
forEach loop, in weather app, 386, 388 
forEach() method, array iteration with, 147 
for... in loop, 113-115 

for displaying properties, 138-139 
for loop, 111-116 

to slow down JavaScript execution, 67 
using with arrays, 112-113 
<form> elements 
selecting, 182 
<FORM> elements, 23 
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for() method, array iteration with 



for() method, array iteration with, 147 
form feed, 47 
form, function vs., 12 
form validation 
client-side, 4 

with conditionals, 116-118 
withjQuery, 260-275 
formValidO function, 259 
forward() method, 166 
function, form vs., 12 
function keyword, 119 
function literals, 126 
functions, 6-7, 36-38 

anonymous/unnamed, 126 
basics, 119 
calling, 124-125 
declaring, 23, 37, 431 
dialog, 127-131 
in jQuery, 183-190 
for attributes, 188 
methods and, 127 
parameters, 120-121 
return keyword, 123-124 
user-defined vs. built-in, 127 

G 

garbage collection, 75-76 
generateSampleData() function, 385 
getAIIResponseHeaders() method, for 
XMLHttpRequest object, 345 
getAttribute() method, 204-206 
getComputedStyleO method, 287 
getDate() method, 68 
getDayO method, 68 
getElementByldO function, 177, 196, 280 
testing for, 224 

getElementsByTagName() method, 285 
getFullYear() method, 68 
.get() function (jQuery), 348 
getHours() method, 68 
.getJSON() function (jQuery), 349 
GET method (HTTP), 338 
POST method vs., 346 
getMilliseconds() method, 68 
getMinutes() method, 68 
getMonth() method, 68 
getSecondsO method, 68 
getTimeQ function, 65, 68 



getTimezoneOffsetO method, 68 

getWXDataO function, 386, 388 

global object, window object as, 152 

global scope, 53 

go() method, 166 

Google, hosting of jQuery, 173 

graceful degradation, 14 

Grid App template (Visual Studio), 375-377 

H 

hacking validation, 270 

hash symbol (#), for ID selectors, 279 

HEAD method (HTTP), 345 

<HEAD> tag (HTML), JavaScript within, 7, 33 

height feature of window object, 227 

height property of screen object, 155 

hexadecimal numbers, 42 

.hide() function (jQuery), 233 

history object, 166-167 

Host header, 338 

hover, 235 

hover() function, 233, 238, 240 
hovers 

modern with jQuery, 237-239 
portable, 238-241 
preloading images for, 242-244 
HTML 

applying style directly to element, 279 
basics, 7 
collections, 203 

document object to create, 159 
in Grid App template, 376 
setting element styles by type, 284-285 
HTML 4.01, DOCTYPE declaration for, 9 
HTML 5, DOCTYPE declaration for, 9 
.html() function, 188 
HTTP HEAD method, 345 
Hypertext Transfer Protocol (HTTP), 338 

I 

id attribute 

for CSS, 278-279 

DOM element retrieval by, 196-200 
of <img> element, 250 
if statement, 32, 93-101 
Boolean expression in, 50 
compound conditions, 98 
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jQuery 



for decisions about program flow, 96-98 
syntax, 94-95 
image hovers, 235-241 
image maps, 251-255 
image rollover, 235 
images 

adding to tiles, 396-397 
preloading for hovers, 242-244 
<IMG> tag (HTML) 

data-win-bind attribute of, 390 
mouseover and mouseout event handlers in, 235 
name and id attributes of, 250 
i modifier, for regular expressions, 73 
implicit array constructor, 141 
incrementing, 85-86 
in while loop, 109 
indenting JavaScript code, 30 
index.html file, with external JavaScript file, 433 
index of array, deleting, 87 
indexOf() method, 148 
infinity, 45 

innerHTML property, 198 
in operator, 84-92 

testing for property with, 139-140 
:input selector, 182 

input, validating with conditional statement, 116- 
118 

inserting elements in page, jQuery for, 189-190 
installing 

Firebug, 56-57 
jQuery Ul, 289-294 
Visual Studio 2012, 363-364 
Visual Studio 2012 Express, 364-370 
instanceof operator, 84, 85 
instantiating XMLHttpRequest object, 335-337 
Internet Explorer 

access to older versions, 15 
alert about viewing blocked content, 435 
navigation object properties for, 158 
prevent Default() method and, 260 
promptO function and, 95-98 
XMLHttpRequest object and, 335 
Internet Explorer 3.0, 4 
Internet Explorer 5. 0/5. 5, 6 
Internet Explorer 10, pseudo-protocol and, 7 
Internet Options dialog box 
Security tab, 95 
invoking functions, 124-125 
isNaN() function, 37, 38, 43, 99 
testing, 43-45 



iteration 

through arrays, 147-148 
through child nodes set, 203 
jQuery functions for, 183 

J 

Java, 3-4 

detection with navigator object, 159 
JavaScript 

avoiding in older browsers, 224-225 
capabilities, 10 
correct placement, 33-34 
customizing for weather app, 385-390 
debugging, 27 
development options, 17-18 
disabling, 10 

in Grid App template, 376 

history, 3-6 

limitations, 10-12 

placement on webpage, 7-9 

program contents, 6-7 

property names, vs. CSS, 281 

relationship between CSS and, 280-288 

samples in Visual Studio 2012, 371 

strict mode, 38-39 

syntax rules, 29-34 

testing for availability, 223 

tips for using, 12-15 

for Windows 8 apps, 355 

writing 

with Eclipse, 425-434 
with Notepad, 434-438 
with Visual Studio, 19-27 
JavaScript language reference, 65 
JavaScript Object Notation (JSON), 331, 344-345 
javascript pseudo-protocol, 7 
join() method, 144 
jQuery, 171 

AJAX and, 330, 348-352 
basics, 173 

callback functions, 190 
connecting to load event, 175-177 
downloads, 173-174 
event handling with, 220 
events, 231-233 
form validation with, 260-275 
functions, 183-190 
including in webpage, 174 
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jQuery Cycle plug-in 



for inserting elements in page, 189-190 
modern hovers with, 237-239 
selectors, 177-183 
by class, 177-178 
by ID, 177 
syntax, 175 
tabular data and, 180 
jQuery Cycle plug-in, 251 
jqueryO function, 175 
jQuery Mobile, 307-326 
basics, 307-310 
downloading, 310-311 
linking with, 313-317 
resources for, 326 
testing, 311-313 
for toolbars, 317-325 
troubleshooting, 313 
jQuery III 

building demonstration page, 290-294 
calendar creation, 294-299 
dialog box, 299-305 
installing, 289-294 
obtaining, 289-290 
troubleshooting, 293 
JScript, 4, 14 
.js extension, 25 

JSON (JavaScript Object Notation), 331, 344 
json.php file, 349 

K 

keyboard, DOM 0 events, 216 
key=value pairs, 351 
keywords, case sensitivity and, 29 

L 

landing page, Solution Explorer to view HTML, 373 
lastChild property, 203 
lastlndexOfO method, 148 
Launch Windows App Certification Kit, 401 
left feature of window object, 227 
length property 
of array, 142 
of string object, 48 
lexical structure, 29 
libraries, 169 

defining personal, 169-171 



line breaks, 33 

return keyword and, 32 
Line Terminators, 33 
linking with jQuery Mobile, 313-317 
changing page transition, 315 
without AJAX, 316-317 
literal backslash, 47 
literals, 6 
LiveScript, 3 
load event 

connecting jQuery to, 175-177 
of window object, 240 
load event of window object, 237 
load() function (jQuery), 231, 348 
local scope, 38 

location feature of window object, 227 
location object, 160-166 
logical NOT operator, 85 
! (exclamation point) as, 86 
logical OR operator, 99 
logo, adding to app, 396-397 
looping 

do. ..while statement, 110-111 
for each. ..in loop, 115-116 
for.. .in loop, 113-115 

for displaying properties, 138-139 
for loop, 111-116 
jQuery functions for, 183 
semicolon (;) and, 32 
while statement for, 108-109 

M 

malware, app security testing for, 380 
map() method, 148 
Markup Validator, 9 
match() function, 102 

regular expressions in, 105 
match method, of String object, 74 
Math object, 45-46 

PI value property of, 46 
pow method of, 37 
properties, 46 
MAX_VALUE, 45 
memory 

consumption, 91 
garbage collection to free, 75 
menubar feature of window object, 227 
methods, 134 

adding to objects, 141 
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objects 



of arrays, 142-148 
functions and, 127 
of window object, 153-154 
Microsoft. See also Windows 8 
Bing Maps, 329 

guidelines for Windows apps, 354 
Microsoft Developer Network, 330 
Microsoft Visual Basic, Scripting Edition, 4 
minification, 91 

minus sign (-), to create negative number, 86 
MIN_VALUE, 45 
modal dialog box, 128-131 
creating, 301-302 
modern hovers, 237 
Modernizr, 171 

modifiers, for regular expressions, 72 

modulo operator, 81 

months 

adding drop-down list to calendar, 298 
displaying multiple in calendar, 297-298 
MooTools, 172 
mouse, DOM 0 events, 216 
mouseout event, 231-233 
handlers, 235-237 
image map support, 253 
mouseover event, 231-233 
image map support, 253 
mouseover event handlers, 235-237 
moving backward in slide show, 247-250 
moving window object, 154, 228-229 
MSDN account, 15 
MSDN Magazine, 141 
multiline comment, 31 
multiplicative operators, 80-81 
music, background, 14 

N 

name attribute of <IMG> element, 250 
name property of window object, 153 
names 

CSS vs. JavaScript, 281 
of DOM events, 218 
for JavaScript style properties, 280 
for libraries, 171 
for variables, 52,122,123 
case sensitivity and, 29 
NaN (Not a Number), 43 



navigation bar, 318-319 
footer, 319-321 
navigation tools, 13 
navigator object, 156-160 
Java detection with, 159 
properties and methods, 226 
userAgent property, 222 
negation operator, 94 
N EG ATI VE_I N FIN ITY, 45 
negative numbers, 86 
nested functions, 126 
nested if statements, 100 
regular expressions in, 105 
new ArrayO explicit constructor, 141 
New File dialog box (Eclipse), 428, 432 
new keyword, 137 
newline, 47 

in regular expressions, 72 
New Project dialog box (Eclipse), 425 
New Project dialog box (Visual Studio), 370-371 
New Web Site dialog box (Visual Studio), 19 
next() function, 203 
nextlmageO function, 246 
nextSibling property, 203 
night sky graphic, image map for, 252 
nodes in DOM tree structure, 196 
nondigit, in regular expressions, 72 
<NOSCRIPT> tag (HTML), 225 
Not a Number (NaN), 43 
Notepad 

external JavaScript file created in, 437 
writing JavaScript in, 434-436 
not equal operator, 81 
now() method of Date() object, 68 
null data type, 50 
Number() function, 80, 86 
numbers, 42-46 

converting strings to, 76 
converting to strings, 76 
converting to, with plus sign, 86 
incrementing and decrementing, 85 
numeric constants, 45 
numeric functions, 43-45 

O 

object-oriented development, 133-137 
objects, 51, 133-134. See also methods 
adding methods to, 141 
built-in, 148-149 
creating, 137-141 
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.off() function 



{ } (curly braces) for, 51 
current, 183 
detection, 223 
properties of, 134 
adding, 138-140 
deleting, 87 
.off() function, 221 
onblur() event, 216 
onchangeO event, 216 
onclick event, 202, 216 
handler, 167 
ondblclick() event, 216 
onfocus() event, 216 
.on() function, 220 
onkeydown() event, 216 
onkeypressO event, 216 
onkeyupO event, 216 
onload() event, 216 
onmousedown() event, 216 
onmousemoveO event, 216 
onmouseoutO event, 216 
onmouseover() event, 216 
onmouseupO event, 216 
onreadystatechange event, 340 
onreset() event, 216 
onresize() event, 216 
onselectO event, 216 
onsubmitO event, 216 
onunload() event, 216 
opener property of window object, 153 
open() method, 154 
of window object, 227 
of XMLHttpRequest object, 337,340 
Opera, 4 

DOM support, 6 
operators, 6, 79 
additive, 80 
assignment, 90-91 
bitwise, 81 
comma, 91 
division, 80 
equality, 81-83 
multiplicative, 80-81 
relational, 83, 83-85 
subtraction, 80 
typeof, 88-89 
unary, 85-89 



P 

package.appxmanifest file, 378, 396 
package manifest, customizing, 396-398 
Package Manifest editor 
Capabilities tab, 378,397 
Declarations tab, 397 
packaging Windows 8 apps, 356-358 
for Windows Store, 379 
PageControlNavigator attribute, 376 
page load times, functions to determine, 68 
parameters of functions, 120-121 
parameter/value pair, 162 
.parent() function (jQuery), 187 
parent node in DOM tree, 196 
parentNode property, 203 
parent property of window object, 153 
parseWXDataO function, 387-388 
password selector, 182 
paths, for files in jQuery, 293 
percent sign (%), as modulo operator, 81 
persistent toolbar, 323-325 
PHP (PHP: Hypertext Preprocessor), 12 
server-side program and, 341 
pipe character (|), for logical OR, 105 
PI value property, of Math object, 46 
plus sign (+) 

for concatenation, 49 
converting to number with, 86 
pop() method, 145 
pop-up windows, 226 
portable hovers, 238-241 
.POSITIVEJNFINITY, 45 
postfix operator, 85, 109 
.post() function (jQuery), 348 
POST method (HTTP), AJAX and, 346-348 
pow function property of Math object, 46 
pow method of Math object, 37 
preloading images for hovers, 242-244 
pre-validating form data, 269-275 
preventDefault() method, 260 
prev() function, 203 
prevImageO function, 249 
previous button, creating for slide show, 247 
previousSibling property, 203 
primitive types, 75 
print() method, 154 
production version of jQuery, 173 
product key, for Visual Studio Express, 367 
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search method, of String object 



program flow, if statement for decisions about, 96- 
98 

programming libraries, 169 
programming paradigms, 133 
progressive enhancement, 14 
promise objects, 386, 390 
promptO function, 95-98, 98 
properties 

in CSS, 278-279 
of objects, 51, 134 
adding, 138-140 
deleting, 87 
looking for, 139-140 
unary operator to remove, 85 
proprietary plug-ins, 13 
prototype pattern, 137 
pseudo-class for object, 136-137 
push() method, 145 

Q 

query string, 351 

exercise to examine, 161-166 
question mark (?) 

in regular expressions, 71 
as ternary operator, 106 
Quirks Mode, 9 
QuirksMode website, 36 
quotation marks 
escaping, 47 

as selectors within jQuery, 175 
for strings, 47 

R 

radio buttons on web forms, 268-269 
:radio selector, 182 

random function property of Math object, 46 
readable code 

line breaks and, 33 
white space and, 30 
readyAJAXO function, 338, 340 
ready() function (jQuery), 261, 262, 293, 294 
readyState property, of event, 340 
.ready() utility function, 175 
reference data types, 42 
references, 75-76 
RegExp object, 70-76 
registerContentHandlerQ method, 167 



registered events, 217 
registering event handlers, 167 
registerProtocolHandler() method, 167 
registration of Visual Studio Express, 367 
regular expression literals, 70 
regular expressions, 70-76 

multiple levels of conditionals and, 102-105 
for removing class name, 286 
syntax, 71-74 
relational operators, 83-85 
in if statement, 95 
removeChildO method, 210 
removeClassO function, 286 
removeEventListener() method, 154, 218 
remove() function (jQuery), 212 
render time, calculating, 66-68 
replace() method, 286 
replace method, of String object, 74 
requestObj variable, 339 
reserved words, 6, 35-36 
:reset selector, 182 

resizing window object, 154, 227, 228-229 
responseText method, 339 
responseXML method, 343 
return keyword, 123-124 
line breaks and, 32 
return value of function, 119 
reverse() method, 148 
RFC (Request for Comments) 

2616, on HTTP, 338 
RFC (Request For Comments) 

2396, on URI generic syntax, 148 
Rhino, 151 

S 

Safari, 4 

DOM support, 6 
same-origin policy, 11, 341 
HEAD method and, 346 
Save As dialog box (Notepad), 435 
scope of variables, 53-61,121-123 
screen object, 154-156 
<script> tag (HTML), to include jQuery, 174 
<SCRIPT> tag (HTML), 7-8, 23 

for external JavaScript file, 26, 433, 437 
src attribute, 23, 34 

scrollbars feature of window object, 227 
search method, of String object, 74 
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search property 



search property, 163 

security warning, from Internet Explorer, 95 
select boxes, 261-265 
selected selector, 182 
selectors in CSS, 278-279 
selectors in jQuery, 177-183 
by attribute, 181-182 
by class, 177-178 
by element type, 178 
form elements, 182 
by hierarchy, 178 
by ID, 177 

by position, 179-181 
self, 152-154 

semicolon (;), to delineate expressions, 32-33, 34 
sendAlert() function, 230 
send() method, of XMLHttpRequest object, 337 
servers, for JavaScript development, 18-19 
server-side applications 

Active Server Pages (ASP) page for, 341 
resources on, 330 
XML responses from, 343 
server-side validation, 257 
hacking, 270-273 
servers, JavaScript and, 12 
setAttribute() method, 206-208 
setDate() method, 69 
setFullYear() method, 69 
setHours() method, 69 
setlntervalO function, 229 
setMilliseconds() method, 69 
setMinutes() method, 69 
setMonth() method, 69 
setSecondsO method, 69 
setTime() method, 69 
setTimeout() function, 229, 230 
shift() method, 145 
showattribsO function, 204 
.show() function, 233 
siblings in DOM, 196, 203 
sideloading, 358, 359 
simple assignment, 90 
simple statement, 35 
single-line comment, 31 
site maps, 13 

slashes (//) for single-line comment, 31 
slice method, 49, 146 
slide shows, 244-251 
creating, 244-246 
jQuery for, 250-255 



moving backward, 247-250 
SlidesJS, 251 

Software Installation dialog box, for Firebug, 56 
Solution Explorer, 25 

to view HTML for landing page, 373 
some() method, 148 
sort() method, 146-147 
splash screen, 396 
splice() method, 148 
Split App template, 377, 394 
src attribute of <script> tag (HTML), 34 
src attribute of <SCRIPT> tag (HTML), 23 
src() property of image object, 242 
Start screen for Windows 8, 353 
startTimer() function, 230 
statements in JavaScript, 6, 34-35 
status property of window object, 153, 227 
stopPropagation() method, 219 
Store menu (Visual Studio), Create App 
Packages, 398 
strict mode, 38-39 
string object 

length property, 48 
methods, 73 
strings, 47-50 

concatenating, 80 

converting array elements to joined string, 144- 
145 

converting date to, 69 
converting numbers to, 76 
converting to numbers, 76 
methods and properties, 48-50 
style attribute (CSS), 278 
<STYLE> element, 279 
submit event handler, 294 
:submit selector, 182 
substring method, 49, 164 
substr method, 49 
subtraction operators, 80 
switch statement, testing with, 106-108 
synchronous AJAX requests, 337-338 
response to, 340 

T 

tab, 47 

in regular expressions, 72 
tabular data, and jQuery, 180 
target attribute of anchor (<A>) elements, 228 
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variables 



technology, overuse, 13 

templates for Windows 8 apps, 370-377 

ternary conditionals, 106,130 

ternary operator, 224 

testing 

browser features, 223-224 
conditionals for end of slide show, 246 
delay in pageload for, 67 
else if and else for, 102 
equality operators, 82-83 
for getElementByldO method, 224 
for JavaScript availability, 223 
jQuery Mobile, 311-313 
in multiple browsers, 5 
for property with in operator, 139-140 
switch statement for, 106-108 
weather app, 398-402 
Windows 8 apps, 356-358 
test method, of RegExp object, 72 
text editor, 17, 434 
text field, validation of, 273-275 
.text() function, 188 
Textpad, 438 
text readers, 13 
:text selector, 182 
themes, in jQuery Mobile, 310 
this keyword, 134 
$(this) selector, 183 
tiles in Windows 8 interface, 353 
adding image, 396-397 
time-outs, .ajax() function for, 351 
timers, 229-231 

time, writing to webpage, 63-64 
toDateStringO method, 69 
toggleClassO function, 287 
tolSOStringO method, 69 
tokens, 6 

toLocaleDateStringO method, 64 
toLocaleLowerCase method, 49 
toLocaleStringO method, 61, 69 
toLocaleTimeStringO method, 64, 69 
toLocaleUpperCase method, 49 
toLowerCase method, 49 
toolbar 

adding buttons, 321-322 
color change, 322-323 
jQuery Mobile for creating, 317-325 
window object feature, 227 
top feature of window object, 227 



top property of window object, 153 
toStringO method, 69 
toTimeStringO method, 69 
touch experience. SeejQuery Mobile 
toUpperCase method, 49 
toUTCStringO method, 69 

transition, changing for link in jQuery Mobile, 315 
traversing DOM with jQuery, 183-188 
trigger() function, 221-222 
troubleshooting 

Firebug add-on for, 57-61 
jQuery Mobile, 313 
jQuery Ul, 293 
undefined variables, 60 
try/catch blocks, 336 
.txt extension, 435 
typeof operator, 85-92, 223 

U 

ui-btn-active class, 325 
ui-state-persistent class, 325 
unary operators, 85-89 
unbinding event handlers, 220-222 
undeclared variables, prevention of, 38 
undefined state, 50 

Uniform Resource Identifier (URI), safety of, 148 

unnamed functions, 126 

unobtrusive scripting, 14 

unshift() method, 145 

user agent, 10 

userAgent property of navigator object, 222 
user-defined functions, 36 
built-in vs., 127 

U.S. National Weather Service data feeds, 381 

V 

val() function, 188, 261 
validation 

client-side vs. server-side, 257 
hacking, 270 
of text field, 273-275 
of web forms 

with conditionals, 116-118 
CSS and JavaScript for, 282-283 
validator from W3C, 9 
variables, 52-69 
declaration, 52-53 
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var keyword 



destruction of unused, 75 
names of, 122, 123 
prevention of undeclared, 38 
returning type, 88-89 
scope of, 53-61, 121-123 
troubleshooting undefined, 60 
types, 53 

var keyword, 35, 38, 52, 122 
VBScript, 4 
Venkman, 27 
vertical tab, 47 
Vim, 434, 438 

Virtual Earth web server, 329 
virus, app security testing for, 380 
visitors, detecting information, 222-226 
Visual Basic.NET, 12 
Visual Studio, 17 

for app development, 355 
external JavaScript files in, 23-27 
jQuery Mobile file in project, 312 
Visual Studio 2012 
installing, 363-364 
JavaScript samples in, 371 
for writing JavaScript, 19-27 
Visual Studio 2012 Express, 18, 19 
downloading installer, 364 
installing, 364-370 
void operator, 85 

W 

weather app 

customizing, 385-396 
CSS, 393-394 
HTML, 390-392 
JavaScript, 385-390 
design and programming, 382-385 
development process, 381-382 
finalizing, 394-396 
testing, 398-402 
web applications 

architecture, 327-328 
JavaScript and interface, 329 
web browsers. See browsers 
web.config, debugging enabled, 22 
web forms, 257-261 

accessing elements of, 261-269 

check boxes, 265-268 

CSS and JavaScript for validation, 282-283 

pre-validating data, 269-275 



radio buttons, 268-269 
select boxes, 261-265 
selecting option, 263-265 
validating text field, 273-275 
WebKit rendering engine, 6 
webpage 

changing text and HTML, 188-189 
jQuery included in, 174 
writing date and time to, 63-64 
website design, 12-15 
web standards, 13 
while statement, 108-109 
white space, 30-31 
line breaks and, 33 
in regular expressions, 72 
width feature of window object, 227 
width property of screen object, 155 
wildcard selectors in jQuery, 182 
window object, 127-131, 148. See also document 
object 

child objects as properties, 153 
child objects of, 151-152 
events, 215-222 
load event, 240 
load event of, 237 
methods, 153-154 
moving and resizing, 154, 228-229 
opening, best practices, 228 
opening, closing, and resizing, 226-229 
opening tabs, 228 
Windows 8, 15-16 

opening Notepad in, 434 
Start screen, 353 

Windows 8 apps, 353. See also weather app 
defining capabilities, 397-398 
development, 354-358 
guidelines, 354 

packaging and testing, 356-358 
planning and design, 355 
distribution, 358-359 
in enterprise, 359 

helper applications for creating, 17 
package manifest, 377-378 
packaging for Windows Store, 379-380 
templates, 17, 370-377 
Blank App, 372-374 
Grid App, 375-377 
Split App, 377,383,394 

Windows 8 Software Development Kit (SDK), 355 
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zip file 



Windows App Certification Kit, 356-358, 359, 380, ^ 

398, 400-401 

Windows Store zip file 

app distribution in, 358-359 for jQuery Mobile, 311 

app submission for approval, 354 for jQuery Ul, 290 

packaging Windows 8 apps for, 379-380 
pricing models for apps, 379 
WinJS library, 382 

word boundary, in regular expressions, 71 
World Wide Web, 338-339 
World Wide Web Consortium (W3C), 5, 193, 335 
application fortesting modules, 6 
event model, 216 
for CSS properties, 278 
online validator from, 9 



X 

XDomainRequest object, 11 
XHR function, 386 

XHTML 1.0 standard, DOCTYPE declaration for, 9 
XHTML (Extensible Hypertext Markup Language) 
JavaScript and, 8 
JavaScript declaration within, 33 
xmldocument object, getElementsByTagName() 
method, 344 

XML (Extensible Markup Language), 6 
AJAX without, 330-331 
processing responses, 343-344 
XMLHttpRequest object (AJAX), 11, 329, 335-348, 
340 

getAIIResponseHeaders() method for, 345 
instantiating, 335-337 
obtaining response headers from, 345 
sending AJAX request, 337 
sending and receiving with, 342-343 



Y 

Yahoo! User Interface (YUI), 171 

year, adding drop-down list to calendar, 298 



Index 



453 



About the Author 



STEVE SUEHRING is a technology architect who specializes in finding simple solutions 
to complex problems and complex solutions to simple problems. When not writing 
technology books, Steve enjoys playing several musical instruments. You can follow 
Steve on Twitter, @stevesuehring. 



Now that 
you've 
read the 
book... 



Tell us what you think! 

Was it useful? 

Did it teach you what you wanted to learn? 

Was there room for improvement? 

Let us know at http://aka.ms/tellpress 

Your feedback goes directly to the staff at Microsoft Press, 
and we read every one of your responses. Thanks in advance! 



Microsoft 




